React 환경에서 API 요청을 할 때 응답값에 대한 상태값 제공, 서버 데이터 상태 관리 용이, refetch 관련 편리한 옵션 제공 등의 이유로 react-query 를 자주 사용하게 된다.
이러한 장점으로 인해 실무에서 만족하면서 사용하던 중 한 가지 불편한 점을 느끼게 되었다.
Query Key 관리
react-query 를 사용하기 위해서는
queryKey, queryFn 값이 필요하다.queryKey 에는 해당 API 의 응답값을 캐싱하기 위한 고유한 값이 적용되고, queryFn 는 Promise 를 반환하는 fetch 함수가 적용된다.단점
이런 방식으로 react-query 를 사용하다 보면 한 가지 단점을 발견할 수 있다.
API 가 클라이언트단에서 한 번만 실행되면 크게 느끼지 못하겠지만 보통 하나의 API 를 다른 페이지나 UI 에서 사용하는 경우가 발생하게 되는데 이때 query key 를 재사용하기 위해 추가적인 작업이 발생하게 된다.
custom hook 활용, 별도의 객체를 생성하여 query key 관리 등의 여러 가지 방법으로 query key 를 재사용할 수 있지만 더욱 간편하고 직관적으로 관리할 수 있는 방법이 있다.
Query Key Factory
query key factory 는 query key 를 구조화할 수 있는 라이브러리다.
구조화를 통해 직관적인 관리와 변경 사항에 대한 수정이 용이해지는 장점이 생긴다.
설치
적용
적용 방식은 2가지가 있다.
- 하나의 파일에서 여러 개의 query 관리
- query 를 별도의 파일로 분리한 뒤 하나의 파일에서 병합하여 관리
사용
개인적으로 별도의 파일로 분리하는 것을 선호해 2번 방식을 사용하고 있다.
참고
