민종useEffect object dependency depthUseEffect의 dependency arrayUseEffect는 가끔 사람을 골탕먹인다. 그리고 이런 sideEffect에 대해 제대로 이해하지 않고 사용하다보면 나중엔 디버깅을 하기 참 곤란해진다. 이번 기회에 useEffect의 동작에 대한 제대로된 멘탈 모델을 가져보자. TL;DR - useEffect는 기본적으로 매 렌더링 마다 실행된다.- dependency array에 primitive types를 넣으면 값이 변경될 때 마다 실행된다.- dependency array에 object를 넣으면 object의 reference가 변경될 때 마다 실행된다.- dependency array에 object를 넣고, object의 값이 변경될 때 마다 실행시키기를 원한다면, use-deep-compare-effect 의 useDeepCompareEffect 를 useEffect 대신에 사용하자.https://sgwanlee.medium.com/useeffect%EC%9D%98-dependency-array-ebd15f35403auseEffect의 Dependency Array 비교 원리요약 useEffect의 Dependency Array 비교 원리를 파악한다. Reference Type일 경우 useEffect의 callback을 호출하지 않기 위해 dependency를 어떻게 비교할 것인지에 대해 대안을 알아본다. useEffect가 존재하는 Component Render Flow First Render: init Component -> useEffect Re-Render: init Component -> clean up useEffect -> useEffect react-reconciler useEffect의 update 조건이 충족할 때, dependency를 확인하는 코드를 보자.https://egas.tistory.com/162
