캐시 전략, React Query vs Redux vs SessionStorage

프로젝트에서 React Query를 상태 공유 방식으로 선택한 이유를 정리해보았습니다. 이 포스트는 동일한 목적을 위해 사용할 수 있는 몇 가지 다른 방식들과 함께 비교하고, 실제로 왜 React Query를 선택하게 되었는지를 설명해보려 합니다.

---

✅ 1. React Query 캐시 방식 (현재 선택)

// 📍 목록 페이지
queryClient.setQueryData(['report', report.reportId], report);

// 📍 상세 페이지
const { data: report } = useQuery<AiReport>({
  queryKey: ['report', reportId],
  queryFn: async () => {
    const cached = queryClient.getQueryData<AiReport>(['report', reportId]);
    if (!cached) {
      router.push('/report');
      throw new Error('Report not found');
    }
    return cached;
  },
});

✔ 장점

• 서버 + 클라이언트 상태를 통합 관리
• 자동 캐시 무효화 & 재검증
• 불필요한 서버 요청 방지 → 성능 최적화
• 타입 안전성 + 자동완성 지원 → 개발자 경험 향상

⚠ 주의점

• React Query 사용을 위한 초기 세팅 필요
• 전역 상태 관리와 목적이 다름 → 남용하면 오히려 복잡해질 수 있음

---

✅ 2. Redux 방식

// 📍 목록 페이지
dispatch(setSelectedReport(report));

// 📍 상세 페이지
const report = useSelector((state) => state.report.selectedReport);

✔ 장점

• 전역 상태 관리에 특화
• 디버깅과 상태 추적이 쉬움 (Redux DevTools)
• 다양한 상태를 복합적으로 다룰 때 유용

⚠ 단점

• 보일러플레이트 많음 → 설정과 코드 양이 증가
• 서버 상태와 클라이언트 상태를 구분해야 함
• 단순 공유 목적에는 과도한 도입

---

✅ 3. SessionStorage 방식

// 📍 목록 페이지
sessionStorage.setItem(`report_${report.id}`, JSON.stringify(report));

// 📍 상세 페이지
const report = JSON.parse(sessionStorage.getItem(`report_${reportId}`));

✔ 장점

• 구현이 매우 단순하고 빠름
• 페이지 새로고침에도 데이터 유지 가능
• 라이브러리 불필요

⚠ 단점

• 타입 안정성 없음 (문자열 변환)
• 데이터 동기화 수동 처리
• 캐시 만료 없음 → 메모리 관리 어려움
• 보안에 취약 (개발자 도구에서 노출 가능)

---

🧠 선택 기준: 왜 React Query를 골랐나?

1. 데이터 일관성

• 서버 데이터 캐싱 & 동기화를 자동화
• 북마크 등 클라이언트 액션 → 서버 상태 변경 → 자동 반영

2. 개발자 경험

• 타입 기반으로 안전한 접근 가능
• useQuery, queryClient로 API 통합 처리 → 코드 가독성 향상

3. 성능

• TTL 기반으로 캐시 관리 → 불필요한 네트워크 트래픽 감소
• SSR/CSR 환경에서 데이터 전환이 자연스러움

4. 유지보수성

• 캐시 정책, 에러 핸들링, 상태 변경 → 모두 일관된 구조로 관리
• 테스트 및 디버깅이 쉬움

5. 확장성

• Pagination, Infinite Scroll, Prefetching 등 고급 기능 확장에 유리
• 쿼리 키 기반으로 다양한 뷰 간 상태를 자연스럽게 공유

---

🏁 결론

비교 항목	React Query	Redux	SessionStorage
구현 복잡도	중간	높음	낮음
타입 안전성	✅ 있음	✅ 있음	❌ 없음
서버 상태 통합	✅ 있음	❌ 없음	❌ 없음
페이지 새로고침 대응	❌ 기본 불가	❌ 기본 불가	✅ 가능
확장성	✅ 뛰어남	✅ 뛰어남	❌ 제한적

React Query는 단순한 상태 공유를 넘어서 서버 상태를 구조화하고, 클라이언트에서 일관되게 다룰 수 있는 가장 유연한 도구입니다.