useEffect

Intro오늘날 리액트 개발의 데이터 패칭에서 react-query를 많이 사용합니다.항상 도구의 사용에 앞서 도구가 어떤 역할을 수행하는지 자세히 이해해볼 필요가 있다고 생각합니다. 도구의 니즈를 구체화하는 것이죠.이번 시간에는 리액트에서 제공하는 API(useEffect, useState)를 이용해서 데이터 패칭을 해보면서 어떤 기능이 추가로 필요한지 고민해보겠습니다. 이번 글에서는 아래 코드를 바탕으로 설명을 진행하겠습니다. 완벽해보이시나요? 아래 코드에는 5개의 버그가 존재합니다.function Bookmarks({ category }) { const [data, setData] = useState([]) const [error, setError] = useState() useEffect((..

Intro"useEffect에 대해 설명해주세요"라는 질문을 받으면 어떤 대답을 해야 할까요?리액트 공식 문서에 따르면 effect는 함수 컴포넌트와 외부 시스템과의 동기화를 목적으로 만들어졌다고 합니다.여기서 외부 시스템이란 DB,네트워크, 브라우저 DOM등이 될 수 있습니다. react 앱을 개발 서버에서 실행하게 되면 useEffect가 의존성 배열과 상관없이 두번 실행되는 것을 경험하게 됩니다.이 부분 역시 동기화라는 키워드와 연결됩니다. 즉 이팩트 함수와 클린업 함수를 통해 subscrib와 unsubscrib가 올바르게 동작하는지 확인하기 위한 처리인 것이죠. 이제 부터 몇 가지 사례를 통해 불필요한 useEffect에 대해 알아보겠습니다. 1. 파생 상태 처리function Form() { ..