[React] 페이지 이동시 스크롤 위치 오류

dolfin·2023년 9월 21일

React

목록 보기

12/13

최근에 멋사 리액트 프로젝트였던 타잉을 다시 리팩토링(?) 하고 있다.
리팩토링인지 새로 만드는건지 하하.. 아무튼 만드는중 스크롤 문제가 있어 기록을 남겨둔다.

문제 상황

height가 긴 onboarding 페이지 맨 아래에서 빨간 버튼을 누르면 로그인 페이지로 이동하는 로직이다. 스크롤 부분을 보면 이전 페이지와 이동한 페이지의 스크롤이 변동이 없는게 보인다.

일반적으로 페이지가 이동을 하면 스크롤이 상단으로 가는것이 사용자 경험상에서도 좋을텐데

왜 이런 문제가 생겼을까?

브라우저의 스크롤 복원(scroll restoration)

해당 문제는 브라우저의 스크롤 복원(scroll restoration) 기능에 의한 것이다. 스크롤 복원은 사용자가 이전 페이지를 떠나고 다시 해당 페이지로 돌아왔을 때, 스크롤이 이전의 위치로 복원되는 기능이다. 이는 사용자 경험을 향상 시키는 역할을 한다.

리액트 라우터나 다른 라우팅 라이브러리를 사용하여 페이지를 전환할때, 해당 기능이 동일하게 작동한다. 사용자가 페이지 간을 전환하면 브라우저는 이전 페이지의 스크롤 위치를 기억하고, 새로운 페이지로 이동할 때 해당 위치로 스크롤을 자동으로 이동시킨다.

SPA

잘 알다시피 리액트는 SPA로 동작하는 특성이 있기 때문에 페이지 이동이 브라우저의 페이지 로드가 필요하지 않다. 리액트에서 React Router와 같은 라우팅 라이브러리를 사용하여 페이지 간의 이동 및 라우팅을 처리한다. 이로 인해 사용자가 페이지를 이동할 때 실제로는 브라우저가 페이지를 다시 로드하지 않으며, 스크롤 위치가 변경되지 않고 유지된다. 사용자가 스크롤을 내린 상태에서 다른 페이지로 이동하더라도 React는 현재 페이지의 컴포넌트를 언마운트하고 새로운 페이지의 컴포넌트를 마운트하여 페이지 간의 전환을 처리합니다.

해결방안

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return <></>;
};

export default ScrollToTop;

리액트 라우터 공식 홈페이지를 따라 ScrollToTop 컴포넌트를 만들어주었다. pathname이 변경될 때 마다 스크롤이 최상단으로 변경되는 로직이다.

import styles from './App.module.scss';
import Header from '@components/Header/Header';
import Footer from '@components/Footer/Footer';
import { Outlet } from 'react-router-dom';
import ScrollToTop from './components/ScrollToTop/ScrollToTop';

function App() {
  return (
    <>
      <Header />
      <ScrollToTop />
      <div className={styles.mainContent}>
        <Outlet />
      </div>
      <Footer />
    </>
  );
}

export default App;