간단하지만 명료하게 리액트 의존성 배열 정리

의존성배열

1. useEffect(effect) ==> 컴포넌트가 렌더링될 때마다 호출됩니다.
2. useEffect(effect, []) ==> 첫 번째 렌더링 후에만 호출됩니다.
3. useEffect(effect, [userId]) ==> 첫 번째 렌더링 후에 호출되며, 이후에 userId가 변경될 때마다 호출됩니다.

 

3번에서 userId 라는 값은 항상 렌더링과 관련된 값이어야 합니다.
`렌더링과 관련된 값` 이라는 것은 그 값이 변경되면 컴포넌트가 다시 렌더링 되는지를 보고 알 수 있습니다.
어떤 변수의 값이 변경됐는데 컴포넌트가 다시 렌더링되지 않는다면 그 변수는 deps 배열에 넣을 필요가 없습니다.

결국 `렌더링과 관련된 값` 이라는 것은 컴포넌트 상태값, 속성값 등을 말하는거구요.
전역 변수 등은 `렌더링과 관련된 값` 이 아닙니다.

 

출처 실전 리액트 프로그래밍