[React] 페이지 이동 후 스크롤 유지하기

 

페이지 이동 후 스크롤 유지하기

 

---

 

 리액트로 프로젝트를 만들던 중 페이지 이동 후 스크롤이 유지되지 않는 문제가 있었다. 메인페이지에서 다른 페이지로 넘어갔다가 다시 메인페이지로 돌아오면 스크롤 위치가 페이지 가장 위로 가있었음🤔 어떻게 하면 스크롤 위치를 유지할 수 있을까 며칠 동안 고민한 결과 다행히 해결했다.

 

 

해결 방법은 다음과 같다.

 

1. 페이지 이동 직전 sessionStorage에 스크롤 위치 저장하기

2. 다시 메인페이지로 돌아왔을 때 sessionStorage에 저장된 스크롤 위치 불러오기 (useLayoutEffect)

 

---

 

1. 메인페이지의 HTML 부분에 스크롤 위치를 저장하는 함수 만들기

 

return ( 
   <div onClick={() => sessionStorage.setItem("y", window.pageYOffset)}>
      // 내용
   </div>
)

 

 컴포넌트 전체를 감싸는 <div></div>에 sessionStorage에 스크롤 위치를 저장하는 함수를 넣어준다. 페이지를 이동한다는 것은 클릭 이벤트가 발생했다는 뜻이다. 즉, 클릭 이벤트가 발생했을 때(= 페이지 이동이 일어나기 바로 직전)의 스크롤 위치(window.pageYOffset)을 sessionStorage에 저장한다, 라는 뜻의 코드이다. 클릭 이벤트가 발생하는 곳의 위치가 아니라 클릭 이벤트가 발생할 때의 스크롤 위치가 저장된다는 뜻이니 헷갈리지 말기!

 

 

2. 메인페이지에 useLayoutEffect로 스크롤 위치 이동시키기

 

  useLayoutEffect(() => {
    if (isWindow) {
      window.scroll(0, sessionStorage.y);
    }
  }, []);

 

 

 이렇게 작성해주면 메인페이지에 들어올 때마다 스크롤 위치가 sessionStorage에 저장된 값으로 설정된다. 화면의 어느 부분을 보여줘야 할지 결정하는 코드라서 useLayoutEffect를 사용하였다.

 

 

---

 

 스크롤 위치 뿐만 아니라 다른 데이터에도 응용 가능하다. 예를 들어 메인 페이지에서 아이템 리스트를 보고 있었는데, 3번째 아이템을 보고 있었다고 치자. 페이지를 왔다갔다 해도 계속해서 3번 아이템이 화면에 출력되게 하려면? 아이템 index 값을 sessionStorage에 저장해두고 위처럼 코드를 작성해주면 된다.