[React] 빠짐없는 디펜던시 규칙 - 설명과 활용 예제

이번 글은 빠짐 없는 디펜던시 규칙에 대한 글이다.

---

 

 

[ 빠짐 없는 디펜던시 규칙 ]

useEffect 안에서 참조한 모든 외부 값은 의존성 배열에 반드시 포함해야 함

=> useEffect나 useCallback, useMemo 안에서 사용한 모든 외부 변수(state, props, 함수 등) 는 의존성 배열([]) 안에 꼭 넣어라

 

 

- 사용 이유

React는 의존성 배열을 보고 “이 값이 바뀌면 다시 실행해야겠다”를 판단

=> 그런데 넣어야 할 변수를 빼먹으면, 값이 변해도 useEffect가 다시 실행되지 않아서 버그가 생길 수 있음

 

 

---

 

 

활용 예제 )

 

- 틀린 예제

=> user가 바뀌어도 이 effect는 다시 안 실행됨

useEffect(() => {
  console.log(user.name);
}, []); // ❌ user는 밖에서 가져왔는데 의존성 배열에 없음

 

 

- 올바른 예제

=> 외부에서 가져온 user를 의존성 배열에 넣어줌

useEffect(() => {
  console.log(user.name);
}, [user]);

 

 

---