React 스크롤 Top 이동

react에서 페이지의 스크롤 top 버튼및 이벤트를 추가하기 위해선
아래와 같은 내용의 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;
}

index.js 파일에 아래와 같이 Router 안에 선언하여 모든 화면에 적용시킬 수 있다.

if (!!rootElement && rootElement.hasChildNodes()) {
    hydrateRoot(rootElement,
        <BrowserRouter>
            <ScrollToTop />
            <HelmetProvider>
                <SnackbarProvider maxSnack={3} dense={true} hideIconVariant>
                    <App />
                </SnackbarProvider>
            </HelmetProvider>
            <ShowNavi />
        </BrowserRouter>,
    );
} else {
    root.render(
        <BrowserRouter>
            <ScrollToTop />
            <HelmetProvider>
                <SnackbarProvider maxSnack={3} dense={true} hideIconVariant>
                    <App />
                </SnackbarProvider>
            </HelmetProvider>
        </BrowserRouter>,
    );
}