React Router 페이지 이동 시 스크롤 상단으로 끌어 올리기
React Router와 같은 라우팅 라이브러리를 사용하여 페이지를 이동할 때
React Router는 React 컴포넌트의 라이프사이클과 히스토리 API를 이용하여 스크롤 위치를 관리하고,
페이지 간 전환 시 스크롤 위치를 초기화하지 않도록하기 때문에 스크롤 위치가 유지된 채로 페이지가 이동된다.
이를 해결하기 위해 아래와 같이 컴포넌트를 생성해서 사용하였다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ScrollToTop.tsx
import { useEffect, ReactNode } from "react";
import { useLocation } from "react-router-dom";
interface ScrollToTopProps {
children: ReactNode;
}
export const ScrollToTop: React.FC<ScrollToTopProps> = (props) => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return <>{props.children}</>;
}
useLocation을 이용하여 현재 페이지의 경로를 가져오고, useEffect를 이용하여 경로가 변경될 때마다 window.scrollTo(0,0)을 호출하여 스크롤을 페이지의 맨 위로 이동시킨다.
생성한 ScrollToTop 컴포넌트를 BrowserRouter의 내부에 포함시킨다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Router.tsx
...
return(
<BrowserRouter>
<ScrollToTop>
<Routes>
<Route path='/' element={<Layout />}>
<Route path='/' element={<Home />} />
<Route path='/project' element={<Project />} />
<Route path='/contact' element={<Contact />} />
</Route>
</Routes>
</ScrollToTop>
</BrowserRouter>
)
...
BrowserRouter는 라우트를 처리하고 URL과 연결된 컴포넌트를 렌더링하는 역할을 합니다. 따라서 ScrollToTop 컴포넌트를 BrowserRouter내에 배치함으로써 페이지 전환 시 스크롤 위치를 관리하는 데 필요한 동작을 수행할 수 있습니다.