React Router 페이지 이동 | 이동 후 최상단으로 자동 스크롤

https://ko.reactjs.org/

React-router를 사용하여 다른 페이지로 이동하면, 기본적으로 이전 페이지에서 스크롤 위치를 기억하고 해당 위치 그대로 스크롤이 적용된다.
그러나 이전 페이지의 스크롤 위치를 무시하고 페이지 스크롤 위치를 상단으로 초기화하려면 다음과 같은 방법을 사용하여 해결할 수 있다.

ScrollToTop Component 생성

---

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

const ScrollToTop = () => {
  const { pathname } = useLocation();

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

  return null;
};

export default ScrollToTop;

• pathname이 변경됐을 때 실행되는 useEffect을 생성한다.
• window.scrollTo() 메소드를 사용하여 브라우저 창을 맨 위로 스크롤한다.

Router 최상단에 적용

---

function App() {
  return (
      <BrowserRouter>
        <ScrollToTop /> //Router 최상단에 적용
        <Nav />
        <Routes>
          <Route path="/" element={<Main />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/cart" element={<Cart />}></Route>
          <Route path="/orders" element={<Order />}></Route>
          <Route path="/shop" element={<Shop />}></Route>
          <Route path="/shop/:id" element={<ShopDetail />}></Route>
        </Routes>
        <Footer />
      </BrowserRouter>
  );
}

• 페이지 이동 시 브라우저의 스크롤 위치가 항상 페이지 상단으로 초기화하기 위해 Router 최상단에 적용한다.