⚠️ 이 글에서는 기본적인 useEffect의 사용법을 다루진 않음 어떻게 쓰면 좋을지에 대한 글
📌 useEffect
useEffect는 컴포넌트를 외부 시스템과 동기화 할 수 있는 React Hook
Convention
useEffect(setup, dependencies?) Parameters
setup:
- 이곳에 Effect의 로직을 작성
setup함수는 선택적으로 정리(cleanup) 함수도 반환할 수 있음 - 컴포넌트가 DOM에 추가될 때, React는 setup 함수를 실행
- 의존성이 변경되어 리렌더링될 때마다 React는 먼저 이전 값으로 정리 함수(cleanup) 를 실행한 후, 새 - 값으로
setup함수를 다시 실행 - 컴포넌트가 DOM에서 제거될 때, React는 마지막으로 정리 함수(cleanup) 를 실행
optional dependencies:
setup코드 내부에서 참조한 모든 반응형 값(reactive values)의 목록. 반응형 값이란
→ props, state, 그리고 컴포넌트 함수 본문 안에서 직접 선언한 변수와 함수들이다.- React용 linter가 설정되어 있다면 이 반응형 값들이 의존성 배열에 올바르게 포함되었는지 자동 검증
- 이 의존성 배열은 항상 항목 개수가 일정해야 하며,
[dep1, dep2, dep3]처럼 inline으로 작성해야 한다. - React는 이전 렌더와 비교 시
Object.is를 사용하여 각 항목의 변경 여부를 확인 - 이 인자를 생략하면, 해당 Effect는 컴포넌트가 리렌더링될 때마다 매번 실행
→ 의존성 배열을 전달 할 때 빈 배열, 전달하지 않을 때의 차이점을 꼭 알아 둘 것
NOTE
- 의존성 배열이 빈배열 일 때
한 번만 실행됨 (초기 마운트 시에만)
- 의존성 배열이 없을 때
모든 리렌더링마다 실행됨
Returns
useEffect의 반환값 = undefined
Caveats
아래 그림과같이 7가지가 있는데 이 중에서 중요한 내용만 요약해서 작성함
-
컴포넌트 내부에서 정의한 객체나 함수가 의존성에 포함되어 있다면 그로 인해 Effect가 불필요하게 자주 실행될 수 있다
→ (해결법): 불필요한 객체나 함수 의존성을 제거하고 state 업데이트나 반응형이 아닌 로직은 Effect 바깥으로 분리 -
사용자 상호작용때문에 실행된 Effect가 아니라면 일반적으로 Effect는 브라우저가 페인팅 작업을 한 뒤에 실행되며 만약 Effect가 시각적인 작업을 수행하는데 눈에띄는 실행지연이나 깜빡임이 보이면 useLayoutEffect를 사용할 것
-
Effect가 클릭과 같은 사용자 상호작용에 의해 실행되는 경우 React는 브라우저가 화면을 페인팅하기 전에 먼저 Effect를 실행할 수도 있다.
이렇게 하면 Effect의 결과를 이벤트 시스템이 관찰할 수 있게되므로 대부분 의도한대로 동작한다.
하지만alert()와 같은 작업처럼 화면이 페인팅 작업 후에 실행해야 하는 일이라면setTimeout을 사용해 지연시켜야한다. -
비록 클릭 같은 상호작용이 원인이라 하더라도 React는 종종 Effect 내부의 상태 업데이트가 처리되기 전에 브라우저가 화면을 다시 페인팅하도록 허용할 수 있다. → 이것도 대부분 의도한대로 동작
하지만 만약 화면이 그려지는 걸 반드시 막고 싶다면useEffect대신useLayoutEffect를 사용할 것 -
Effect는 클라이언트에서만 실행되며, 서버 렌더링 중에는 실행되지 않는다.
Usage
공식문서 Usage를 보면 거의 useEffect를 어떻게 사용하면 좋을지에 대한 글로만 작성되어 있어
따로 특별하게 주의해야 될 내용이나 알아두면 좋을 내용으로만 구성해놓음
Wrapping Effects in custom Hooks
Effects에서 직접 데이터 Fetching 로직을 작성하면 반복적인 작업이 되고 나중에 캐싱이나 서버 렌더링과 같은 최적화를 추가하기 어려워진다.
직접 커스텀 훅을 작성하거나 커뮤니티에서 관리하는 커스텀 훅을 사용하는 것이 더 좋다고 한다.
→ 커스텀 훅 라이브러리 : SWR, TanStackQuery-React,
What are good alternatives to data fetching in Effects?
data fetching을 Effect안에서 다루면 다음과 같은 단점이 존재한다.
Effect는 서버에서 실행되지 않는다.
→ 초기 서버 렌더링된 HTML에는 로딩 상태만 포함되고 실제 데이터는 없음
→ 클라이언트는 모든 JavaScript를 다운로드한 뒤 앱을 렌더링하고 나서야 데이터를 fetch 수행 → 비효율적
직접 fetch하면 네트워크 워터폴(network waterfall)이 발생하기 쉽다.
→ Ex) 부모 컴포넌트를 렌더 → 부모가 데이터를 fetch → 자식 컴포넌트를 렌더
→ 자식이 다시 데이터를 fetch
→ 네트워크 속도가 느릴 경우 연쇄적인 fetch는 병렬 처리보다 훨씬 느림
(차라리 그냥 한번에 최상위 컴포넌트에서 병렬로 fetch하라는 것)
캐싱이나 프리로딩(preloading)이 어려움
컴포넌트가 언마운트되었다가 다시 마운트되면 매번 데이터를 새로 fetch해야 함
race condition(경쟁 조건) 같은 버그를 막으려면 많은 보일러플레이트 코드가 필요
읽어보면 좋음
https://www.robinwieruch.de/react-hooks-fetch-data/
해당 글을 보면 React에서 데이터 fetch를 어떻게 다루면 좋을지에 대한 글임
기본적으로 TanStackQuery의 구현 방법을 따른다.
