useEffect

함수형 컴포넌트가 렌더링 될 때마다 특정 작업을 수행 할 수 있는 리액트 훅이다.
이 훅을 한 번만 실행시켜주고 싶다면 두번째로 오는 인자(dependency)에 빈배열을 넣어주면 된다.
그런데 한가지 의문이 들었다. useEffect에서 dispatch를 할 때 자꾸 dependency에 dispatch를 추가하라는 워닝이 뜨는 것이다. 해당 dispatch는 컴포넌트가 마운트 될때만 실행되는건데 워닝이 왜 뜰까?

원래는 dependency안에 해당 기능의 변수 혹은 함수명을 넣어주는게 맞다고 한다. 왜냐하면 리액트는 useEffect 내에 있는 기능이 실행이 되기 전까지 안에 무엇이 있는지 모르기 때문이다. 그래서 두번째 인자의 배열안에 요소를 넣어주어야 해당 요소의 변경이 일어나는 것을 감지하여 useEffect 안에 선언된 기능이 실행이 된다.
만일 그렇지 않는다면 혹시모를 버그가 생길 수 있기 때문에 그것을 방지하기 위해 ESLint에서 워닝을 띄어주는 것이다.

그런데 dependency에 객체가 들어와도 실행이 될까?
정답은 실행이된다!
왜냐하면 객체가 참조하고 있던 value가 바뀌기 때문에 실행이 된다고한다.
(useEffect의 dependency array에 primitive value가 아닌 object 타입이 있다면 주의해서 봐야한다. 만약 key-value가 동일하다고 하더라도 useEffect는 refrential equality(참조 동일성 즉 참조가 같은지) 를 보기 때문에, 리렌더링으로 인해 object가 새로 만들어졌다면 내부 값이 동일해도 useEffect는 한 번 더 실행된다.)

참고
useEffect는 라이프 사이클 메소드가 아니다.
[React] useEffect dependency array에 object와 array 넣기