페이지가 렌더링되면 스크롤을 맨 위로 올리기

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

// 페이지 이동 시 스크롤을 맨 위로
export default function ScrollToTop() {
  const { pathname } = useLocation();

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

  return null;
}

스크롤을 맨 밑으로 내리고 다른 컴포넌트가 렌더링 되어도 스크롤이 맨 아래인 상태에서 렌더링된다.

위 코드는 새로고침이나 새로운 컴포넌트가 렌더링 됐을 때, 스크롤을 맨 위로 올려주는 함수이다.

 

import ScrollToTop from "./components/common/ScrollToTop";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <BrowserRouter>
        <ScrollToTop />
        <App />
      </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>
);

 함수를 만들고 index.js에서 import하여 넣어주면 새로고침이나 새로운 컴포넌트가 렌더링 됐을 때 스크롤이 맨 위로 올라간 상태로 렌더링 된다!