[React] useEffect의 dependency array에 object

 

// custom hook을 만들던 도중 무한루프에 빠지는 현상이 생겨 이유에 알아보았다.

 

useEffect는 렌더링이 될 때마다 실행된다.

이는 두 번째 매개변수인 dependency array를 사용하여 useEffect의 실행을 제어할 수 있다.

dependency array의 값들에 대하여 이전값과 현재값을 비교하게 되는데 만약 동일하지 않다면 Effect가 호출된다.

이때 리액트는 Object.is() 메소드를 통해 두 값을 비교하여 호출 여부를 결정한다. 

 

리액트는 렌더링 시 props를 새 객체로 생성한다. 따라서  props로 전달한 객체가 이전 객체와 동일하더라도 다른 참조 주소를 가진 객체이기 때문에  dependency array에 넣어도 계속 호출되어 무한루프에 빠지고 만다.

즉, 객체나 배열과 같은 reference 타입의 값은 동일한 값을 갖더라도 참조값이 다르기 때문에 Object.is()로 판별했을 때 false 값을 갖는다.

 

이를 해결하기 위해 참조한 글 첫번째 글에 나와있는 방법이나 값에 대한 깊은 비교를 하는 라이브러리를 이용하는 방법 등이 있다.

 

---

참고한 글

Object & array dependencies in the React useEffect Hook | Ben Ilegbodu

UseEffect의 dependency array

GitHub - kentcdodds/use-deep-compare-effect: 🐋 It's react's useEffect hook, except using deep comparison on the inputs, not r