IT정보

뒤로가기

[React] 새로운 페이지 로드 했을 때 스크롤 맨 위에서 시작하도록 설정

5점
2021-10-11 18:11:00 추천 0

리액트 페이지 열릴 때 스크롤 맨 위로 고정시키기


리액트로 개발을 하다보면 기본적으로 생각되는 것들이 설정되어 있지 않은 경우가 있습니다. 그 중 하나는 새로운 페이지에 들어갔을 때 스크롤 위치입니다. 이전 페이지에서 스크롤이 반쯤 내려와 있으면 다음 페이지에서도 스크롤이 반쯤 내려온 상태로 페이지가 로드됩니다. 아무래도 특수한 경우가 아니고서는 사용자 입장에서 스크롤이 맨 위로 올라가 있는 것이 편하므로 해당 부분에 대한 내용을 작성하도록 하겠습니다.


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(00)
        }
    }

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 RouterRouteSwitch } 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에서 감싸는 형식으로 사용을 해주면 간편하게 다양한 페이지들을 스크롤 고정시켜줄 수 있어요.




비밀번호 입력후 수정 혹은 삭제해주세요.


댓글목록

등록된 댓글이 없습니다.
댓글 수정 댓글 수정
0/500 byte
댓글쓰기 댓글쓰기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

0/500 byte
평점

위에 보이는 문자를 공백없이 입력하세요. (대소문자구분)

에게만 댓글 작성 권한이 있습니다.