페이지 이동 시, 스크롤 상단 고정하기

• 방법 1 (컴포넌트 별로 적용할 때)
  •  src/util/useScrollTop.jsx
  • 적용된 컴포넌트 진입시 페이지 맨 위로 스크롤해주는 커스텀 훅

import { useEffect } from "react";

const useScrollTop = () => {
  useEffect(() => {
    if (window) window.scrollTo(0, 0);
  }, []);
  return;
};

export default useScrollTop;

import useScrollTop from "../util/useScrollTop";

const BlogDetails = () => {
  useScrollTop();

  return (
	//생략...
  );
};

export default BlogDetails;

• 방법 2 (전체 페이지에 적용할 때)
  • src/hooks/ScrollTop.jsx

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

export default function ScrollTop() {
  const { pathname } = useLocation();

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

  return null;
}

• App.jsx (APPLY)

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Outlet } from "react-router-dom";
// import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import GlobalStyle from "./assets/style/GlobalStyle";
import Header from "./components/Header/Header";
import Footer from "./components/Footer/Footer";
import { Suspense } from "react";
import Loading from "./components/Loading";
import ScrollTop from "./hooks/ScrollTop";

const queryClient = new QueryClient();

export default function App() {
  return (
    <Suspense fallback={<Loading />}>
      <QueryClientProvider client={queryClient}>
        <ScrollTop />
        <GlobalStyle />
        <Header />
        <Outlet />
        <Footer />
        {/* <ReactQueryDevtools initialIsOpen={true} /> */}
      </QueryClientProvider>
    </Suspense>
  );
}