[React] router 페이지 이동 시 스크롤 최상단 이동

 

 

 

안녕하세요. 제니입니다!

오늘 정리할 내용은 전 프로젝트에서도 사용했는데, 놓쳤었던 것 같아서

정리해보려고 합니다!

 

 

 

일단, 페이지를 이동할 때 useNavigate를 사용하고 있는데, 

navigate 함수로 이동할 때, 스크롤이 하단에 있으면 이동하는 페이지도 하단에 위치한 상태로

이동되는 것을 확인하실 수 있으실 거에요.

 

 

 

지난 번 프로젝트 때는, 해당 내용을 방지하기 위해서 

navigate를 사용하는 함수마다 사용해줬는데, 더 효율적인 방식이 있더라구요!

 

 

 

1. util 함수 만들어주기

일단, scroll-to-top.ts util 파일을 생성해주었습니다.

 

 

 

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop = () => {
	const { pathname } = useLocation();

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

export default ScrollToTop;

 

 

 

코드를 동일하게 사용하시면 되는데요.

useEffect 의존성 배열에 pathname을 넣어서, 경로가 바뀔 때 스크롤이 최상단으로 갈 수 있도록

구현해주었습니다.

 

 

 

2. index.tsx 내에 넣어주기

지난 번에 navigate를 사용하는 함수마다 넣어주었다고 말씀드렸는데,

그렇게 할 필요 없이 Router가 사용되는 파일에 넣어주시면 됩니다!

 

 

 

ReactDOM.createRoot(document.getElementById('root')!).render(
	<Provider store={store}>
		<Suspense fallback={<Loading />}>
			<BrowserRouter>
				<ScrollToTop />
				<Routers />
			</BrowserRouter>
		</Suspense>
	</Provider>,
);

 

 

 

 

저는 이렇게 넣어주었구요.

Router 경로들은 Routers라는 컴포넌트안에 모두 정리해두었습니다.

 

 

 

이렇게만 넣어주시면, 앞으론 경로가 바뀌어도 스크롤은 맨 위로 올라가시는 것을 확인하실 수 있을거에요!

오늘의 기록 끝!