같은 페이지에서 <a />를 이용하면 id가 페이지를 이동할 수 있다.
그런데 다른 페이지로 이동은 어떻게 될까?
같은 페이지의 경우 페이지가 로딩되면서 페이지만 이동하고 이동하는 기능이 사라진다.
scrollIntoView()
우리는 보통 페이지 이동을 위해서 다양한 scorll- method를 사용한다.
window.scrollIntoView({
behavior : 'smooth',
block:'center'
})
Catch the Hash
맨 처음 말했듯이, <a />와 id를 활용해서 페이지를 이동한다.
<a />에 정보가 id 정보가 있으면 id='callMe' 이렇게 적으면 이쪽의 위치로 이동합니다.
<a href='/section#callMe' /> // a tag를 클릭하면, 하단에 있는 id 값으로 이동
(...)
<div id='callMe' >
...
</div>
id=''callMe' 값 추출
<a />를 클릭해 이동해 오면, URL https://...../section#callMe 이렇게 해서 이동해 온다.
그러면 그 위치로가기 위해서는 callMe 라는 string 정보만 필요하기 때문에 string 정보를 추출해야 한다.
substring() method
참조
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring
const location = useLocation(); // React-router-dom
useEffect(() => { // Scroll to the element with the matching ID
const hash = location.hash;
if (hash) {
const element = document.getElementById(hash.substring(1)); // Remove '#' from hash
if (element) {
element.scrollIntoView({
behavior: 'smooth',
block:"center"
});
}
}
}, [location]);
가장 중요한 거.
<Link />를 쓸 것.
<a />를 쓰면 안됨. 이유는 맨 처음 말한 부분에 힌트가 있음. 리로딩이 되기 때문.