리액트 페이지 열릴 때 스크롤 맨 위로 고정시키기
리액트로 개발을 하다보면 기본적으로 생각되는 것들이 설정되어 있지 않은 경우가 있습니다. 그 중 하나는 새로운 페이지에 들어갔을 때 스크롤 위치입니다. 이전 페이지에서 스크롤이 반쯤 내려와 있으면 다음 페이지에서도 스크롤이 반쯤 내려온 상태로 페이지가 로드됩니다. 아무래도 특수한 경우가 아니고서는 사용자 입장에서 스크롤이 맨 위로 올라가 있는 것이 편하므로 해당 부분에 대한 내용을 작성하도록 하겠습니다.
1. 스크롤 관련 컴포넌트(component)만들기
컴포넌트에 스크롤 관련 js를 만듭니다. 파일명은 ScrollToTop.js로 하겠습니다. 내용은 다음과 같습니다.
import React, { Component } from 'react';
import { withRouter } from 'react-router';
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}
render() {
return this.props.children
}
}
export default withRouter(ScrollToTop)
이렇게 ScrollToTop.js컴포넌트를 만들었다면 이제 App.js를 손봐주어야 합니다.
2. App.js에 ScrollToTop컴포넌트 삽입시키기
개발자에 따라 이미 App.js의 내용이 작성되어 있을 것입니다. 그렇기 때문에 핵심이 되는 부분만 보여드리도록 하겠습니다.
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
//스크롤 맨 위로 보내기//
import ScrollToTop from "./components/ScrollToTop";
import Home from "./pages/Home";
function App() {
return (
<AuthProvider>
<Router>
<ResponseMenuBar>
<ScrollToTop> //ScrolltoTop삽입
<Switch>
<Route exact path="/" component={Home} />
</Switch>
</ScrollToTop>
</ResponseMenuBar>
</Router>
</AuthProvider>
);}
export default App;
각각의 페이지마다 설정을 해주는 방법도 있지만 이렇게 App.js에서 감싸는 형식으로 사용을 해주면 간편하게 다양한 페이지들을 스크롤 고정시켜줄 수 있어요.
