사용자 지정 후크를 사용하여 다른 페이지를 방문할 때 React에서 스크롤 상태 저장

문제:

useScrollPosition.js에서 사용자 지정 후크를 만들 수 있습니다.

import {useEffect} from "react";

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

/* custom hook which will save the scroll state and also set 
the scroll position of our page */
const useScrollPosition = (page) => {

    useEffect(() => {

// Get the scroll state if it exists

        const pageScrollPosition = scrollPositions[page];

// If it exists then set the scroll position of our page

        if (pageScrollPosition) {

/* Using setTimeout to set the scroll position of the 
page as useEffect gets triggered before the page has 
actually rendered */

            setTimeout(() => {
                window.scrollTo(0, pageScrollPosition);
            }, 50)

        }

/* save function to save the scroll position in 
the scrollPositions object */

        const save = () => {
            scrollPositions[page] = window.scrollY;
        }

/* Attaching an event listener to listen for a scroll event 
and then fire the save function everytime a scroll event occurs */

        window.addEventListener('scroll', save)

/* Removing the event listener when the component unmounts*/

        return () => {
            window.removeEventListener('scroll', save)
        };
    }, [page]);
}

export default useScrollPosition;

이제 스크롤 상태를 저장하려는 구성 요소에서 useScrollPosition 후크를 사용합니다.

import useScrollPosition from "./useScrollPosition";

// Call the useScrollPosition hook with the page name

useScrollPosition("Home")

그게 다야! 모두 끝났습니다!