[React] useEffect 경고 : React Hook useEffect has missing dependencies

728x90

📌 UseEffect

렌더링 이후에 발생하는 Side Effect들을 처리하기 위해 제공하는 리액트 Hook이다.

// Callback Function, deps로 구성되어 있다.
useEffect( () => { do something.. }, [deps])

deps에 지정해둔 값에 따라 다음과 같은 Side Effect에 맞춰 Callback 함수를 실행한다.

Mount, 처음 나타났을 때
Unmount, 사라질 때
Update, 특정 props가 바뀔 때

🧐 Missing Dependency Warnig?

React Hook useEffect has a missing dependency: 'xxxxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

useEffect를 사용할 때 가장 많이 볼 수 있는 경고이다.

단순하게 사용하는 state를 deps에 포함하는 것을 포함해 2가지 해결방법이 존재한다.

📌 Missing Dependencies 해결하기

1️⃣ State 넣어주기

useEffect 내에서 사용하고 있는 state를 넣어주는 방법이다. 가장 기본적인 방법이다.

useEffect(() => {
   if (count > 5) return;
   setCount(count + 1);
}, [count]);

함수형 업데이트를 통해서 warning을 피할 수 있다.

useEffect(() => {
   if (count > 5) return;
   // state : useEffect를 불러올 때 가져온 초기값..!
   setCount(state => state + 1);
}, []);

2️⃣ useCallbak 사용하기

useEffect 내부에서 함수를 사용할 때 해당 함수의 파라미터도 deps 배열에 넣어야 경고가 뜨지 않는다.

이 방법은 단순히 state를 추가해준 것과 같다.

const getData = async () => {
   const data = await getAPI(param);
   setData(data);
}

useEffect(() => {
   getData();
}, [getData, param]);

자바스크립트에서 함수는 객체라서, 컴포넌트가 리렌더링될 때마다 함수가 새로 만들어지고 새로운 참조값을 넘겨주기 때문에 함수가 무한히 실행된다.

useCallback을 통해 함수를 재사용(function memoization)하면 이런 문제들을 해결할 수 있다.

const getData = useCallback( async () => {
   const data = await getAPI(param);
   setData(data);
}, [param]);

useEffect(() => {
   getData();
}, [getData]);

저작자표시

희조 공부방