React useEffect unmount 이슈 (유저 스크롤 위치 기억)

Question

무한 스크롤 사용 이후에 유저의 스크롤 위치를 기억하게 하여 컴포넌트가 unmount되고 다시 mount 되었을 때 원래 스크롤 위치로 가게 구현하려고 합니다.현재 프로젝트의 경우 함수형 컴포넌트 구조이기 때문에 hooks를 사용하고 있어, 유저가 페이지를 떠나는 것(unmount)을 감지 할 수 있는 useEffect의 return 부분에 redux로 window.scrollY 값을 dispatch 하려고 시도해 보았습니다.unmount 바로 전에 해당 함수를 실행하는게 아니라, unmount 이후에 해당 함수를 실행하여 참조한 값(window.scrollY)을 제대로 못가져오는 것 같습니다. 물론, 당연히 component 내부의 값이 unmount 되니까 참조할 수 없지라는 생각이 들지만, unomunt 되는 컴포넌트의 state의 최초 값은 이상하게 참조를 해서 실행은 시키더라구요 다만, unmount 되기 전까지 변경된 값은 반영하지 못하더군요. 다른 방법으로는, Navigation이나 다른 페이지로 이동하는 모든 버튼에 사용자가 클릭 하는 경우 window.scrollY 값을 disptach 해야 하는 걸까요? const Home = () => { const dispatch = useDispatch(); const [scrollY, setScrollY] = useState(3); useEffect(() => { return () => { console.log(window.scrollY); // 0 setScrollY(window.scrollY); // <- 동작하지 않는듯 해요 console.log(scrollY); // 3 }; }, []); return ( <> // 생략 ); }; before unmount 라는 부분이 있어 제어할 수 있으면 좋겠네요.....

itsOkay12 · Accepted Answer

답변 감사합니다.제가 구현하는 게 좀 특수한 경우이긴 한데, 뒤로가기의 경우에는 스크롤이 유지가 되는데 제가 구현하고 싶은 것은 모바일 환경과 비슷하게 하기 위해, 다른 탭(페이지)으로 이동해도 스크롤이 유지 되기 원합니다. 하루종일 삽질하다가 유용한 useLayoutEffect 훅을 지원하는 것을 알게 되었습니다!!!!!!!!제가 겪은 현상은 예상대로 unmount 이후에 함수를 실행하기 때문이였습니다.useLayoutEffect를 사용하면, useEffect와는 좀더 디테일한 라이프 사이클을 다룰수 있는 것 같습니다.

하루방 · Answer

useState(window.scrollY);하시면 다른 곳 갔다가 다시 돌아오셔도 해당 스크롤 값으로 상태를 유지 하실거에요 혹시나 뒤로가기했을때 스크롤 안변한다고 하시면 해당페이지 focus 되었을때를 감지하는 useEffect가 있을거에요!

React useEffect unmount 이슈 (유저 스크롤 위치 기억)

2개의 답변

Q&A 목록