useRef를 사용해서 특정 컴포넌트들의 offsetTop값을 알아야 해서 useEffect 내에서 ref를 건 컴포넌트들의 값을 useState로 값을 저장했다. 그리고 그 useRef를 사용한 컴포넌트가 포함된 경로에서 다른 경로로 이동하니까 아래와 같은 에러가 떴다.
Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
해석해보자면 마운트되지 않은 컴포넌트를 비동기처리에서 state 변경을 할 수 없다. 그러니까 해당 컴포넌트에서 사용한 useEffect로 비동기 처리하는 것을 클린업해줘야 한다는 것!
그래서 아래와 같이 useEffect 함수 안에 클린업 함수를 추가해줬더니 해결! ** return() => { ... }
useEffect(() => {
setClientTop($(document).scrollTop());
setHomeTop(homeRef.current.offsetTop);
setAboutTop(aboutRef.current.offsetTop);
setAiTop(aiRef.current.offsetTop + 260);
return () => {
homeRef.current = null;
aboutRef.current = null;
aiRef.current = null;
};
}, [homeRef, aboutRef, aiRef]);
homeRef, aboutRef, aiRef 로 레퍼런스를 건 컴포넌트들이 마운트되지 않은 페이지경로에서는 메모리 누수가 발생하기 때문에 이 비동기 처리 이후에 클린업을 해줘야 이 컴포넌트를 마운트한 페이지에서만 사용 가능하다 .
References