방법 1: Zustand 전역 상태 관리

Zustand 스토어에 데이터와 스크롤 위치를 저장하여 복원합니다.

작동 원리

1. 데이터 저장 (Zustand Store)

const usePostStore = create((set, get) => ({
  posts: [],      // 불러온 데이터
  scrollY: 0,     // 스크롤 위치
  fetchNextPage,  // 다음 페이지 로드
  setScrollY,     // 스크롤 저장
}))

2. 스크롤 저장 (Link onClick)

const handleBeforeNavigate = () => {
  setScrollY(window.scrollY);
};

3. 스크롤 복원 (useEffect)

useEffect(() => {
  if (posts.length > 0 && scrollY > 0) {
    requestAnimationFrame(() => {
      window.scrollTo(0, scrollY);
    });
  }
}, [posts.length, scrollY]);

장점

- 직관적인 상태 관리
- 데이터와 스크롤 위치 함께 관리
- 클라이언트 네비게이션 시 상태 유지

단점

- 메모리 사용량 증가
- 새로고침 시 상태 초기화
- 별도 라이브러리 필요