React에서 페이지 새로고침 시 스크롤 위치 제어하기

문제 상황

페이지 새로고침 시 예상치 못한 스크롤 위치로 이동하는 문제

원인

이러한 현상이 발생하는 이유는 브라우저의 scrollRestoration 기능 때문입니다. 이 기능은 UX를 개선하기 위해 도입되었으며 다음과같이 작동합니다.

• 브라우저는 각 페이지의 스크롤 위치를 자동으로 기억
• 페이지 새로고침이나 뒤로/앞으로 가기 시 저장된 스크롤 위치로 자동 복원
• 이전 페이지의 스크롤 위치가 다음 페이지에도 영향을 미칠 수 있음

해결 방법

1useEffect(() => {
2        if ("scrollRestoration" in window.history) {
3            window.history.scrollRestoration = "manual"
4        }
5        window.scrollTo(0, 0)
6    }, [])

이 코드는 크게 두가지 역할을 수행합니다.

1. 스크롤 복원 동작 비활성화

1if ("scrollRestoration" in window.history) {
2   window.history.scrollRestoration = "manual"
3}

• scrollRestoration 속성을 manual로 설정하여 브라우저의 자동 스크롤 복원 기능을 비활성화

2. 스크롤 위치 초기화

1window.scrollTo(0, 0)

• 페이지 로드 시 스크롤 위치를 최상단으로 강제 이동
• 사용자에게 항상 일관된 시작점 제공

참고

https://developer.mozilla.org/ko/docs/Web/API/History/scrollRestoration