React Query Key Factory 패턴 사용기
프론트엔드
React Query Key Factory 패턴 사용기
두줄요약
React Query 쿼리 키를 도메인별 factory로 관리해 캐시 구조와 무효화 범위를 명확히 정리하는 방법을 소개했습니다. queryOptions와 useQueries까지 함께 묶어 재사용성과 유지보수성을 높이는 흐름을 설명했습니다.
핵심 내용
- React Query의 쿼리 키를 도메인별 factory 객체로 중앙 관리하는 Query Key Factory 패턴 소개
- all()을 공통 루트로 두고 하위 키를 계층적으로 구성해 prefix matching 기반 무효화 범위 정리
- queryOptions, useQueries, invalidateQueries와 결합해 재사용성과 캐시 관리 일관성 강화
- 폴더 구조와 키 파일을 도메인 문서처럼 활용해 전체 캐시 구조를 한눈에 파악하는 방식 정리