리액트로 구현한 홈페이지의 경우, 페이지를 이동하였을 때 이전 페이지의 스크롤 위치가 남아서 다음 페이지로 전달된다. 그런데 특정한 상황에서는 (메인 페이지로 이동하는 경우 등) 스크롤 위치를 재조정해줄 필요가 있다. 이를 구현하기 위한 2가지 방법이 있다.

1. useRef()를 사용하는 방법.

useRef()는 리액트에서 HTML DOM를 제어할 때 사용하는 Hooks이다. 특정 HTML 태그를 지정하여 제어한 다음 원하는 기능을 부여하여 사용하곤 한다.

const topPoint = useRef();

useEffect(() => {
    topPoint.current.scrollIntoView({behavior: 'smooth'});
}, []);

return (
    <div className='home' ref={topPoint}/>
    
          <div className='homelogo'/>

          <div className='maintext'/>

    </div>
);

페이지의 최상단 지점에 해당하는 태그에 ref를 지정한 다음, 페이지가 렌더링 될 때 scrollIntoView 함수를 통해 스크롤의 위치가 ref로 지정된 곳으로 이동되도록 구현한 것이다.

2. ScrollToTop 컴포넌트.

위 방법은 스크롤 이동이 필요한 모든 컴포넌트에서 매번 useRef()를 사용하여 스크롤 이벤트를 동작시켜야하는 번거로움이 존재한다. 이를 해소하기 위해 다음과 같은 방법을 사용해볼 수 있다.

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

useLocation() 함수를 이용하여 페이지의 경로명을 받아온 다음, useEffect와 디펜던시를 이용하여 페이지 경로가 변화할 때마다 scrollTo() 함수를 호출하여 스크롤의 위치를 이동시킬 수 있다. 나의 경우 모든 페이지 이동마다 스크롤을 최상단으로 이동시키기만 하면 되는 상황이었기에 index.js 내부에서 App 컴포넌트와 동시에 렌더링 되도록 구현하였고 잘 동작하는 것을 확인할 수 있었다.

• 디펜던시의 내용을 바꾸면 스크롤 이동 이벤트가 발생되는 상황을 다르게 설정할 수 있다. 응용법을 생각해볼 것.

• 이 방법은 react-router-dom 6버전 이전 시대에 사용되던 방법이라고 한다. 6버전에서 추가된 ScrollRestoration 컴포넌트가 있는데 이걸 사용하는 것이 최신 방법이라고하니 더 알아볼 것!