다른 페이지를 방문할 때 React에서 스크롤 상태 저장

문제:

스크롤 상태를 저장하는 것은 특히 React 웹 애플리케이션의 페이지가 정말 길고 콘텐츠가 많은 경우 좋은 사용자 경험을 위해 매우 중요합니다. 사용자가 다른 페이지를 방문했다가 이전 페이지로 돌아와서 페이지 상단에서 다시 스크롤해야 한다는 사실을 알게 되면 매우 짜증날 수 있습니다. 사용자가 이전에 있었던 페이지의 스크롤 위치를 저장하는 작은 코드를 추가하여 이러한 고통을 줄일 수 있습니다.

다음과 같이 두 개의 별도 함수를 만듭니다.

// Object in which we will save our scroll position state
const state = {}

// Function to save the scroll state
export const saveState = (page, object) => {
    state[page] = object
}

// Function to get the scroll position state
export const getState = (page) => {
    return state[page]
}

스크롤 위치를 유지하려는 기본 구성 요소에서 다음 코드를 추가합니다.

import {getState, saveState} from "./Util";

// Get stored scroll position state
const scrollPoint = getState('scrollState')
const scrollY = scrollPoint?.scrollY

/* useEffect to get and set the scroll position in the 
current page */
useEffect(() => {
    if (scrollY) {

/* setTimeout used to set the scroll position as the
useEffect triggers before the actual page renders */
        setTimeout(() => {
            window.scrollTo(0, scrollY);
        }, 50)
    }
}, [scrollY])

// useEffect to store the scroll position in the current page 
useEffect(() => {
    const save = () => {
        saveState('scrollState', {
// accessing the vertical scroll position in the window object
            scrollY: window.scrollY
        })
    }

/* Firing the save function whenever the event listener 
picks up a scroll event */
    window.addEventListener('scroll', save)
    return () => window.removeEventListener('scroll', save)

}, [])

또한 이를 사용자 지정 후크로 별도로 사용한 다음 스크롤 위치를 저장하려는 모든 구성 요소/페이지에서 사용할 수 있습니다. 사용자 정의 후크에서 동일한 논리를 사용하는 다른 기사를 참조하십시오.

이제 구성 요소의 스크롤 상태를 성공적으로 설정했습니다.