[React] dependency 배열의 값이 변화했지만 리렌더가 되지 않는 이슈

useEffect는 props 혹은 state의 변화에 응답한다.

때문에 props, state가 아닌 값을 dependency 배열에 추가하여도 useEffect는 재동작하지 않는다.

예를 들어 window.innerHeight 값이 변화할 때마다 useEffect가 실행되기를 원해서 다음과 같이 코드를 작성했다고 가정한다.

useEffect(() => {}, [window.innerHeight])

해당 코드는 동작하지 않는다. window.innerHeight는 props도 state도 아니기 때문이다.

즉, window.innerHeight 값이 변화할 때 useEffect를 실행시키고 싶다면 window.innerHeight 값을 props 혹은 state로 관리해야함을 의미하기도 한다.

const [innerHeight, setInnerHeight] = useState(window.innerHeight) 

useEffect(() => {
	window.addEventListener('resize', () => {
    	setInnerHeight(window.innerHeight)
    })
}, [])

useEffect(() => {
  // 실행시키고 싶은 구문
}, [innerHeight])

참고문헌

https://stackoverflow.com/questions/57742730/reactjs-useeffect-not-rendering-after-dependency-changed

https://stackoverflow.com/questions/60476155/is-it-safe-to-use-ref-current-as-useeffects-dependency-when-ref-points-to-a-dom