[모모] 페이지 변경시 스크롤이 고정되는 문제

문제

사진과 같이 게시글 페이지 하단에서

상세 페이지 진입시

스크롤이 아래로 고정되어있음을 발견했습니다.

 

원인

모모는 React 라이브러리를 사용한 SPA입니다. 

SPA란 Single Page Application의 약자로 말 그대로 하나의 페이지를 사용합니다.

 

Ajax 기술을 사용하여 서버로부터 매번 새로운 페이지를 받는것이 아닌,

한 페이지 내에서 필요한 부분만 동적으로 업데이트하여

화면 깜빡임없이 부드러운 화면전환과 데이터 크기를 줄일 수 있습니다.

 

따라서 페이지가 새로 랜더링되더라도

하나의 페이지를 사용하기때문에 스크롤이 고정되어있습니다.

해결

useEffect를 사용하여 컴포넌트가 마운트 될 때

pathname 변경시 스크롤이 브라우저 최상단으로 올라가는 로직을 작성하였습니다.

'lists' 페이지에서는 사용자가 상세 페이지 진입 후 뒤로가기로 다시 진입 할 수 있으니 제외하였습니다.

//App.tsx

export default function App() {
  const location = useLocation();
  const token: string | null = localStorage.getItem(AUTHORIZATION);

  const { pathname } = useLocation();

  useEffect(() => {
    if (pathname !== "/lists") {
      window.scrollTo(0, 0);
    }
  }, [pathname]);
  
  return (
    <>
      <ScrllToTopInstant />
      <GlobalStyle />
	<Header />
      <Router />
      <Footer />
    </>
  );
}