useEffect 무한루프에 빠지지 않는 방법

1. 함수를 종속성으로 사용할 경우

useCallback을 사용하여 선언한 함수를 메모이제이션 한다.

2. 배열 변수를 종속성으로 사용할 경우

useRef를 사용하여 참조가 변경되지 않도록 한다.

3. 객체를 종속성으로 사용할 경우

useMemo를 사용하여 객체값이 변경되지 않도록 한다.

무한루프의 원인

useEffect는 얕은 비교를 사용하여 종속성이 변경되었는지 확인한다. 이때 랜더링 시 참조를 재정의하면서 변경이 일어난다. 실제로는 변경된 내용이 없더라도 계속 리렌더링이 발생하여 무한루프에 빠지게 된다.

문제 해결의 핵심은 종속성으로 전달한 참조값이 변경되지 않도록 하는 것이다.