페이지 이동시 임의의 페이지 화면이 보여서 눌렀을 때 최상단에 위치하게 하기 위해서 찾아보다가 이글을 정리하게 되었다.
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함수에 넣어서 사용하면 된다.