The ref value 'elementRef.current' will likely have changed by 어쩌고 에러

문제 상황

intersection observer API를 이용해 스크롤업 버튼 구현을 했다.

npm run build에서 경고창이 발생했다.

build 과정에서 에러가 나니 아주 주의 바람

왜?

경고문구

The ref value 'elementRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'elementRef.current' to a variable inside the effect, and use that variable in the cleanup function.eslintreact-hooks/exhaustive-deps

문제 원인

cleanup 함수가 비동기로 실행되는데 컴포넌트가 unmonunt 될 때 화면에서 사라지고 나서 cleanup 함수가 실행되기 때문에 발생~
useRef로 선언한 ref 요소의 경우 current 속성을 통해 접근하는 것은 가변적이다. 따라서 cleanup 함수가 실행되는 순간에는 화면이 업데이트 되고 난 뒤기 때문에 ref의 current의 값은 null로 바뀐다!
그렇기 때문에 바뀐 후에 클린업 함수가 실행돼서 여기서 경고가 발생한 것이다.

문제 해결

useEffect 내부에서 current 속성을 미리 상수에 할당시켜 주자!

example