let's get IT with DAVINA ๐Ÿ’ป

ํŽ˜์ด์ง€ ์ด๋™ ์‹œ, ์Šคํฌ๋กค ์ƒ๋‹จ ๊ณ ์ •ํ•˜๊ธฐ ๋ณธ๋ฌธ

DEV_IN/React

ํŽ˜์ด์ง€ ์ด๋™ ์‹œ, ์Šคํฌ๋กค ์ƒ๋‹จ ๊ณ ์ •ํ•˜๊ธฐ

๋‹ค๋นˆ์น˜์ฝ”๋“œ๐Ÿ’Ž 2023. 2. 8. 02:54
  • ๋ฐฉ๋ฒ• 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>
  );
}
Comments