[250211] 하하! 리벤지 성공

저번 도전 했었던 스크롤 저장 기능을 다시 한 번 도전 해보았습니다.

이전 도전했던 내용 << 해당 블로그 글을 들어가보면 이전에 했었던 과정이 나옵니다.

1. useLocation을 활용한 1차 시도

처음에는 useLocation을 사용하여 페이지 간 상태를 전달하려고 했습니다. useLocation은 React Router에서 제공하는 훅으로, URL의 query parameter나 상태(state)를 가져오는 데 유용하게 사용됩니다. 그런데 페이지에서 location.state로 전달한 상태에 접근하려 했지만, 페이지를 떠났다가 돌아오면 해당 상태가 사라지는 문제에 부딪혔습니다. React Router에서 state를 전송할 때, 페이지를 벗어나면 그 값이 유지되지 않는 것이 문제였습니다. 또, 해당 훅은 제대로 다루어 본 적이 없어 프로젝트의 기간 내에 완성이 불가능 할 것 같기에 결국, localStorage랑 비슷한 sessionStorage에 저장해보려고 했습니다.

2. sessionStorage를 이용한 시도

sessionStorage는 브라우저의 세션 동안 데이터를 저장할 수 있는 방법으로, 페이지를 새로 고침하거나 이동하더라도 상태를 보존할 수 있습니다. 이를 활용해 스크롤 값을 저장하고, 페이지가 다시 로드될 때 이를 읽어오는 방법을 시도했습니다. 하지만 useEffect의 unmount 기능을 제대로 활용하지 못해 원하는 대로 동작하지 않았습니다. 페이지를 벗어날 때 상태를 정리하는 코드가 제대로 동작하지 않아, 여러 번 시도했으나 결과적으로 실패했습니다.

3. 그 이후 리벤지

해당 기능 구현에만 집중하다보면 기본 구현도 안 될것 같아 우선 미루어두고 제작이 완료 된 후 추가 기능으로 구현을 하였습니다. 제작을 완료하는 과정에서 전역 상태 관리 RTK를 활용 했었고, 이를 기반으로 스크롤 값을 RTK로 상태 관리 해보자는 아이디어를 떠올렸습니다. Redux는 애플리케이션의 상태를 전역적으로 관리할 수 있기 때문에, 페이지 간에 상태를 손쉽게 전달하고 보존할 수 있습니다.

1. 먼저, Slice를 만들어 scrollPosition을 저장할 수 있는 상태를 추가했습니다.

   const scrollSlice = createSlice({
     name: "scroll",
     initialState = {
     scrollPosition: 0,
   };,
     reducers: {
       // 스크롤 값을 저장하는 함수
       setScrollPosition: (state, action) => {
         state.scrollPosition = action.payload;
       },
     },
   });

2. useEffect() 훅을 사용해 페이지가 로드될 때마다 저장된 scrollPosition 값을 window.scrollTo로 적용하도록 했습니다.

    useEffect(() => {
       window.scrollTo(0, scrollPosition);
     }, [dispatch, scrollPosition]);

3. 추가적으로 스크롤 초기화 버튼을 제작해 언제든 맨 위로 돌아갈 수 있게 적용했습니다.

   const scrollToTop = () => {
       window.scrollTo(0, 0); // 최상단으로 스크롤 설정
     };

4. 최종 결과 및 마무리

이번에는 Redux Toolkit을 통해 상태 관리를 효율적으로 처리하고, useEffect() 기능을 활용하여 스크롤 값을 정상적으로 복원하는 기능을 성공적으로 구현할 수 있었습니다. 이제 페이지를 떠나고 돌아와도 항상 이전 스크롤 위치로 돌아가며, 깔끔하게 상태를 관리할 수 있게 되었습니다.