react 환경에서 라우트 이동 시 스크롤 초기화

페이지 라우트 이동 시 스크롤 구현 및 스크롤 애니메이션 추가

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

type ScrollProps = {
  children: React.ReactNode;
};

function ScrollToTop(props: ScrollProps) {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  }, [pathname]);
  return <div>{props.children}</div>;
}

export default ScrollToTop;

따로 컴포넌트를 만들어줌.

<ScrollToTop>
	<App />
</ScrollToTop>

render 할 컴포넌트 감싸주면 적용 완료