[react] 페이지 이동시 스크롤 최상단에 위치하기

페이지 이동시 임의의 페이지 화면이 보여서 눌렀을 때 최상단에 위치하게 하기 위해서 찾아보다가 이글을 정리하게 되었다.

useLocation()

처음에 useLocation()을 알아야 하는데 이는

npm install react-router-dom

react-router-dom 모듈을 설치하여 임포트해준다.

import { useLocation } from 'react-router-dom';
const location = useLocation();

useEffect(() => {
  console.log(location);
}, [ location ])

그리고 나서 location 변수에 담아 이를 location이 랜더링될 때마다 콘솔에 찍어 보이게 한다. 그리고 콘솔에 보면, hash, pathname, search 등이 보이는데 pathname을 사용해 줄 것이다.

• 콘솔 로그에 보이는 것
  • pathname : URL에 도메인다음의 / 부터의 문자열
  • search : pathname다음의 ?부터의 문자열
  • hash : pathname다음의 #부터의 문자열
  • state : location 객체로 화면이동을 시킬 때 코드 상으로 보내는 객체

→ 여기서 pathname을 사용해줄 것이다.

ScrollToTop.js

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;
}

반응형

→ 이렇게 하면 location이 담아지고 이를 랜더링시에 scroll을 이동시키다는 말이다. 즉 페이지 이동이 일어나게 되면 scrollTo는 스크롤을 이동시킨다는 말이다. 안에 있는 값들은 (x좌표, y좌표)가 되게 된다. 즉, (0,0)은 최상단을 의미한다.

App.js

import ScrollToTop from "./ScrollToTop";

...

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <NavBar />
      <Switch>
        ...
      </Switch>
      <Footer />
      <BackTop />
    </BrowserRouter>
  );
}

export default App;

app.js에서 BorwserRouter아래에 위치해주게 되면, 자연스럽게 최상단으로 페이지가 이동하게 된다.

원하는 좌표로 이동하기

document.querySelector("#champPre")

documnet.querySelector()로 하여 위치를 알아낸다. 그리고 classname이나 id를 이용해 querySelector를 사용하여 값을 가져온다.

 let location = document.querySelector("#champPre")});

이를 location 이라는 변수에 선언하고 querySelector의 값을 할당한다.

let location = document.querySelector("#champPre").offsetTop;

offsetTop으로 변수 location의 top 위치를 가져온다.

  const scrollMove = () => {
    let location = document.querySelector("#champPre").offsetTop;
    window.scrollTo({ top: location, behavior: "smooth" });
  };

위치를 모두 가져왔으므로 이를 window.scrollTo()의 parameter에 넣어주고나서 로직을 scrollMove라는 함수로 만들어준뒤 버튼에 onClick함수에 넣어서 사용하면 된다.