[React] 페이지 이동 시 스크롤 위치 조정하기

✅ 구현하고자 하는 것

아래의 페이지 이동 시 스크롤이 최상단에 위치하게 하고 싶다.

• 메인 페이지에서 김치 상품을 클릭할 때
• 카테고리 페이지에서 김치 상품을 클릭할 때
• 상세 페이지 이 상품 어때요? 에서 김치 상품을 클릭할 때
• 장바구니 버튼을 클릭 할 때

---

❓ 문제 상황

React Router - ScrollRestoration

React Router v6에서 제공하는 ScrollRestoration 컴포넌트가 있는데, 보통 Root Component에 쓰여 모든 페이지를 컨트롤하는 데 쓰이는 것 같다.
나는 특정 페이지에서만 scroll이 되게 하고싶어서 다른 방법을 찾아보았다.

v6 이전에는 아래 ScrollToTop 컴포넌트를 직접 만들어서 필요한 컴포넌트 내부에서 호출하는 방식이 추천되었다고 한다.

// ScrollToTop.js

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

---

💡 해결 방법

필요한 컴포넌트에서 useEffect 내부에 window.scrollTo(0, 0)을 선언해주었다.
상세페이지 제품 id가 바뀔 때 실행되어야 하므로, dependency array에 id를 추가했다.

// ProductDetail.jsx

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

장바구니 페이지는 첫 렌더링 때만 스크롤 위치를 바꿔주면 되기 때문에 dependency에 빈 배열을 추가했다.

// Cart.jsx

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

---

🤔 더 알아볼 것

• navigate 대신 redirect 메소드를 사용해서 이동하는 방법

---

References

• React Router - ScrollRestoration
• React 페이지 이동 시 스크롤 맨 위로 오게 하는 방법