구독 리스트 페이지에서 뒤로가기 시 스크롤 & 상태 유지하기

유저 요청사항: 구독 리스트 페이지에서 뒤로가기 시 스크롤 & 상태 유지하기

 

구독 리스트에서 특정 아이템을 클릭해 상세 페이지로 들어갔다가 뒤로가기를 눌렀을 때, 여러 상태들이 초기화되는 문제가 있었다.

대표적인 문제는 다음과 같다.

• 스크롤 위치가 맨 위로 돌아감
• 검색 키워드 초기화
• 상태 필터(무료/유료 등) 초기화
• 페이지네이션(예: 전체보기 선택)이 초기화

예를 들어, 100개의 구독 중 50번째를 내려서 보고 있었다면, 상세 페이지 갔다 온 뒤 다시 스크롤을 내려야 하는 UX 문제가 발생했다.

---

문제 해결 과정

❌ 처음 시도: URL Query Parameter 활용

처음에는 검색 상태를 URL 쿼리 파라미터로 저장하는 방식으로 접근했다.
하지만 곧 문제를 겪기 시작했다.

• router.push()가 무한 리렌더링을 유발
• URL이 지나치게 지저분해짐
• 사용자도 URL이 보기 싫다는 피드백이 있었다

결론적으로 적합하지 않은 방법이었다.

---

❌ 두 번째 시도: SessionStorage 사용

상태를 SessionStorage에 저장하고 복원하는 방식도 시도했다.

하지만 클라이언트 사이드 라우팅에서는 페이지가 새로고침되지 않기 때문에 굳이 브라우저 스토리지를 사용하지 않아도 되는 상황이었고, 일부 상태가 다시 초기값으로 불리는 문제가 있었다.

---

✅ 최종 해결: Recoil Atom + React Query 캐싱

최종적으로 선택한 방법은 Recoil Atom을 이용해 상태를 메모리 레벨에서 직접 유지하고, React Query의 캐싱을 활용하는 방식이었다.

이 방식의 장점:

• 컴포넌트가 언마운트되어도 Atom 값은 유지
• 브라우저 스토리지 불필요
• 쿼리 상태까지 그대로 복원 가능

구조는 다음과 같이 되었고, 모드에 따라 별도의 Atom을 두었다.

• 스크롤 위치
• 일반 리스트 쿼리
• 그룹 리스트 쿼리
• 그룹 모드 여부

 

** 회사에서 전역상태관리로 recoil을 사용

---

스크롤 복원 로직

처음에는 단순히 window.scrollTo()를 사용했지만 렌더링 타이밍 문제로 제대로 작동하지 않았다.
그래서 페이지 높이가 충분히 렌더링될 때까지 체크하며 복원하는 로직을 추가했다.

핵심 포인트:

• 데이터가 먼저 렌더링되어야 스크롤을 복원할 수 있다
• 부드러운 스크롤(smooth)로 UX 개선
• 복원중 저장 방지 flag 적용

실제로 적용 후 사용자 경험이 매우 자연스러워졌다.

---

결과

적용 이후 다음과 같은 개선을 얻었다.

• 검색어 유지
• 필터 상태 유지
• 페이지네이션 옵션 유지
• 스크롤 위치 복원
• 새로고침 없이 빠른 네비게이션

---

이번 경험을 통해 느낀 점

• 클라이언트 사이드 라우팅 환경에서는 브라우저 스토리지보다 전역 상태 관리가 더 적합한 경우가 있다.
• 비동기 렌더링 타이밍 문제는 실제 사용자 경험에 큰 영향을 준다.
• “상태”와 “보여주는 UI값”은 별개라는 것을 상기해야 한다.