← 질문 목록
#6깊이 0
useEffect 의존성 배열을 잘못 넣으면 어떤 문제가 생기는가?
너무 적게 넣으면 오래된 값을 붙잡고, 너무 많이 넣으면 불필요하게 다시 실행된다. 방향이 반대인 두 문제다.
| 넣는 양 | 증상 | 알아채기 |
|---|---|---|
| 너무 적다 | 클로저가 마지막으로 실행된 렌더의 값을 본다 | 오류가 안 나서 늦게 발견된다 |
| 너무 많다 | 매 렌더마다 실행되고 무한 루프로 간다 | 바로 티가 난다 |
의존성을 빠뜨리면 이펙트가 마지막으로 실행된 렌더의 값을 붙잡는다. 최신 상태를 읽는 줄 알았는데 옛 값이 나오는 상황이 여기서 생긴다. 콘솔에는 아무 오류도 없어 발견이 늦다.
반대로 매 렌더마다 새로 만들어지는 객체나 함수를 의존성에 넣으면 참조가 계속 바뀐다. 이펙트가 매번 실행되고, 그 안에서 상태를 갱신하면 무한 루프가 된다.
주의
정리 함수를 빠뜨리는 것도 같은 범주다. 구독이나 타이머를 걸어두고 정리하지 않으면 언마운트된 컴포넌트가 계속 살아 있다. 이펙트가 자주 실행될수록 누수가 빨리 쌓인다.
판단 기준은 단순하다. 이펙트 안에서 쓰는 모든 외부 값을 넣고, 그래서 너무 자주 실행되면 값 자체를 안정화한다. 의존성을 빼서 해결하는 것은 증상만 가리는 것이다.