useEffect 의존성 제거

useEffect는 코드 흐름을 파악하기 어렵게 만든다는 생각이 들었다.

일단 렌더링 된 이후 useEffect가 실행되기 때문인데

 

만약 의존성 배열에도 여러 내용이 추가되면 ..?

리렌더링 되는 횟수를 줄이기 위한 방법이 있을지 생각하다가 공식 문서를 읽어보게 됨.

https://ko.react.dev/learn/removing-effect-dependencies

 

가능하면 의존성을 줄이기 위한 방법들이 소개되어 있었고,

의외로 간단하게 해결할 수 있는 내용들이 있어서 간단하게 기록

 

useEffect 의존성 제거하기

1. 함수를 useEffect 내부에 작성

2. 객체를 포함해야 한다면?

구조분해 할당으로 원시값 추출하기 => 객체는 계속 참조값이 바뀌기 때문.

const {id, name} = obj

https://ko.react.dev/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect

3. 아니라면 객체 또는 함수를 아예 컴포넌트 외부에 작성하기