CRA를 사용해서 개발하거나 따로 ESLint 설정을 했다면 한 번쯤은 마주쳤을 warning
리액트 라이프 사이클에 따라서 가장 처음 마운트 되었을 때 effect를 실행하려고 했는데 왜 경고를 할까?
<aside>
💡 useEffect, useLayoutEffect, useMemo, useCallback 또는 useImperativeHandle
의 마지막 인수로 종속성 목록을 지정하는 경우 콜백 내에서 사용되는 모든 값을 포함하고 React 데이터 흐름에 참여해야 합니다. 여기에는 props, state 및 그로부터 파생된 모든 것이 포함됩니다.
출처: 리액트 공식 문서
</aside>
→ 의존성 배열을 지정하는 hook의 콜백 내에서 state, props, 함수를 사용하고 있으면 의존성 배열에 넣어라!
클래스 컴포넌트에는 constructor, componentDidMount, componentDidUpdate,
componentWillUnmount 와 같이 리액트 라이프 사이클에 대응할 수 있는 각각의 메소드가 존재
그러나 useEffect는 라이프 사이클 훅이 아니다. useEffect는 app의 state값을 활용하여 동기적으로 부수효과를 만들 수 있는 메커니즘이다.
| 의존성 배열 | 라이프 사이클 관점 | 동기화 관점 |
|---|---|---|
| 배열 없음 | 렌더링마다 effect 실행 | state, props가 변경될 때마다 실행 |
| 빈 배열 | 마운트할 때만 effect 실행 | 데이터 흐름에 관여하는 어떠한 값도 사용하지 않음. 의존성 배열에 변화를 감지할 값이 없으므로 effect 스킵 |
| 값 추가 | 추가한 값이 변경될 때만 실행 | 추가한 state, props가 변경될 때마다 실행 |
함수가 props, state 또는 파생된 값을 참조하지 않는 경우에만 의존성 배열에서 함수 컴포넌트를 생략하는 것이 안전하다.