[React] 리액트 경로 이동시 스크롤 상단 이동 방법

프로젝트 진행중에 다른 페이지를 이동한 경우 스크롤이 이전 페이지의 스크롤에 유지되는 문제가 있었다.

사실 이 부분이 기능적으로 좋다고 생각하는 부분도 있지만, 다양한 방면에서 불편함이 더 많았다.

 

일단 방법은 경로가 달라지면 스크롤을 최상단으로 올리는 컴포넌트를 만들고, 해당 컴포넌트를 Router 사이에 넣는 방법이다.

 

---

//ScrollOnTop.jsx 파일

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

export default function ScrollOnTop() {
  //패스네임이 바뀌면 스크롤을 0,0으로 옮기는 역할을 함
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return null;
}

 

위처럼 react-router-dom의 useLocation을 이용하여 pathname의 변화를 감지하는 방법을 사용했다.

해당 pathname을 useEffect의 dependency로 넣어서 경로가 바뀔때 마다 window.scrollTo(0,0)이 실행된다.

---

해당 컴포넌트는 react-router-dom의 기능을 사용하고 있으므로 아래 코드블럭처럼 BrowserRouter 사이에 넣어야 한다.

 

Router.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import MainPage from "../page/MainPage";
import ScrollOnTop from "../utils/ScrollOnTop";

const Router = () => {
  return (
    <BrowserRouter>
      <ScrollOnTop />       //이렇게 사이에 넣는다!
      <Routes>
        <Route element={<MainLayout />}>
          <Route path="/" element={<MainPage />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

---

일탈 (일상의 방탈출 : 방탈출 카페를 테마 및 업체별로 모아보는 프로젝트 사이트) 을 만들면서 처음으로 유저 피드백을 통한 기능 및 성능개선을 해보았다. 확실히 유저 피드백은 내가 생각하지 못한 사용자경험적인 부분에 대한 피드백, 그리고 예상치 못한 버그들이 수없이 많이 발견되었다. 언젠간 첫 배포에서도 이런 피드백보다는 사이트가 너무 편리하고 좋다 라는 말이 더 많도록 많이 노력해야겠다!