React 페이지 이동 시 Scroll 맨 위로 오게 하는 방법

포트폴리오 작업하다가 scroll 문제를 발견! 

 

바로 페이지 이동 시 스크롤 위치가 그 전 페이지의 위치에 있다는 것 SPA로 개발하다보니 나타날 수 있는 사소한 문제!

구글링했더니 방법이 바로 나왔다 

 

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

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

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

  return null;
}

pathname이 변경될 때 scrollTop값이 0으로 가도록 함수를 만들어주고 Router 안에 심어주는 것이었다

scrollTop.js 컴포넌트를 만들어줄까 하다가 굳이 그럴 필요가 있을까 싶어서 index.js 안에 만들었다

 

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter, useLocation } from 'react-router-dom';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import youtubeReducer from './redux/youtubeSlice';
import flickrReducer from './redux/flickrSlice';
import menuReducer from './redux/menuSlice';

const store = configureStore({
	reducer: {
		youtube: youtubeReducer,
		flickr: flickrReducer,
		menu: menuReducer,
	},
});

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

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

	return null;
}

ReactDOM.render(
	<React.StrictMode>
		<HashRouter>
			<Provider store={store}>
				<ScrollToTop />
				<App />
			</Provider>
		</HashRouter>
	</React.StrictMode>,
	document.getElementById('root')
);

Router 안에 ScrollToTop 을 선언해주면 끝! 

 

페이지 이동 시 scroll이 맨 위로 오는 것 확인!