React 스크롤 위치 조정

스크롤 위치 조정하기

React 프로젝트가 SPA이므로 스크롤이 아래로 내려가 있을 때 화면을 이동하면, 그대로 스크롤이 아래에 남아 있는 채로 화면이 전환되는 문제가 발생했다.

React-router에서도 이러한 현상에 대한 해결책을 제시하고 있다.

Scroll Restoration

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;
}

위의 코드로 컴포넌트를 만들고 (ex. ScrollUp.js) <BrouserRouter>안에 선언해준다.

이렇게 해주면 페이지 이동에도 새 페이지처럼 스크롤이 맨 위로 이동한다.

---

📌 참고자료
https://velog.io/@tlatjdgh3778/React-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-%EC%8B%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%A8-%EC%9C%84%EB%A1%9C-%EC%98%A4%EA%B2%8C-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95