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>
);
}
'DEV_IN > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
What is React? (3) | 2023.02.21 |
---|---|
ํน์ ๋ฒํผ์ ๋๋ ์ ๋๋ง, ์ด๋ฒคํธ ์ฃผ๊ธฐ (6) | 2023.02.17 |
prevent scroll event with MODAL (์คํฌ๋กค ๋ฐฉ์ง-๋ชจ๋ฌ์ฐฝ) (5) | 2023.02.17 |
window.open ์์ฐฝ(ํ์ ์ฐฝ) ์ด๊ธฐ (0) | 2023.02.09 |
ํ ํ์ด์ง ๋ด์์ ๋ค๋ฅธ component๋ก ์ด๋ํ๊ธฐ (2) | 2023.02.08 |
Comments