[React] 페이지 이동 시 스크롤 초기화

문제

 

react는 SPA를 만드는 라이브러리로, 그 특성상 페이지 이동 시 스크롤바 위치가 그대로 유지된다.

 

해결

 

useLocation, useEffect 훅을 이용해 페이지가 이동될 때마다 스크롤 위치를 초기화 시켜주는 컴포넌트를 만들어 해결할 수 있다.

 

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollRestoration() {
	const { pathname } = useLocation();
    
    useEffect(() => {
    	window.scrollTo(0, 0);
    }, [pathname]);
    
    return null;
}

위와 같은 컴포넌트를 만들어준 후에, index.js나 app.js에 있는 router에 넣어주면 페이지 이동할 때 스크롤바가 초기화되는 것을 확인할 수 있다.

ReactDOM.render(
    <BrowserRouter>
      <ScrollRestoration/>
      <App />
    <BrowserRouter/>,
    document.getElementById("root")
);

 

참고한 곳

https://velog.io/@kylee31/React-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9C%84%EC%B9%98-%EC%A1%B0%EC%A0%95