시작

현재 진행 중인 사이드 프로젝트는 강아지 유치원 서비스다.

내가 맡은 파트는 견주 마이페이지이며 현재 작업은 강아지 삭제 기능이다.

현재 dogId로 관리되며 dogId를 통해 강아지를 삭제 및 활성화할 수 있다.

강아지 클릭 시 해당 강아지의 dogId를 저장하게 된다.
dog가 삭제 되면 dogId를 doglist 첫번째 dogId로 변경해 주려고 한다.

다만 doglist는 상위 컴포넌트에서 호출되는 데이터고 이를 props로 내려 주거나 recoil로 관리하기에 불필요한 작업이 많아지게 되어 고민하게 되었다.

Tanstack Query를 사용해 서버 상태를 관리하고 있어 이부분을 활용하고 싶었다.
Tanstack Query의 가장 큰 장점 중 하나는 데이터를 캐싱 할 수 있다는 점이지 않을까 싶다.

---

여러가지 방법

1. 일차원적인 방식은 api 호출

다만 이 방법은 해당 컴포넌트에 굳이 호출할 필요가 없을 수도 있고, 상위 컴포넌트에서 이미 호출하고 있다면 중복 호출하는 셈이다.

2. props로 상위 컴포넌트의 데이터를 하위 컴포넌트에 전달

최상위 컴포넌트에서 호출하고 있는 데이터 였고,
내가 작업해야하는 컴포넌트는 두 번째 하위 컴포넌트로 하나의 기능 작업에 필요한 데이터를 위해 props로 관리하는게 맞을까 싶었다.

3. recoil을 사용해 보는건 어떨까

recoil은 프론트에서 상태를 관리하는 라이브러리로 서버 상태를 관리하기엔 적합하지 않았다.
리로드할 경우 데이터가 초기화 되기 때문에 데이터를 유지하는데 한계가 있다.

getQueryData를 활용하자

4. Tanstack Query의 캐싱 기능

Tanstack Query의 getQueryData 메서드를 사용했다.
인수는 query key를 받는다.

해당 query key는 각각의 상태 데이터들이 가지고 있는 고유한 key 값으로 이를 인수로 전달할 경우 해당 key로 선언된 캐시 데이터를 가져올 수 있다.

즉, 캐시된 데이터라서 최신화가 안 되어 있지만, api 호출 없이도 내가 원하는 데이터를 바로 사용할 수 있다.
(api 재 호출 할 경우 캐시된 데이터도 최신화 된다.)

만약 캐싱된 doglist 데이터를 사용하고 싶다면 아래처럼 작성하면 된다.

const queryClient = useQueryClient();
const cacheMemberData = queryClient.getQueryData(["memberInfo"]) as IMemberInfo;
const { doglist } = cacheMemberData;

getQueryData 메서드를 사용하기 위해서는 useQueryClient를 먼저 선언해야한다.

또한, getQueryData 메서드는 상위 컴포넌트(이전 호출)에 영향을 받는다.
만약 다른 곳에서 "memberInfo" 를 가지고 있는 서버 데이터를 호출한 경우
data를 반환하고 그렇지 않을 경우 undefined를 반환하기 때문에 이점을 유의해야 한다.

---

마치며

getQueryData 메서드를 통해 다른 라이브러리 또는 api 호출을 다시 하지 않아도 다른 곳에서 한 번이라도 호출하게 되면
자식 컴포넌트에서 캐시된 서버 데이터를 사용 할 수 있다는 특징을 가지고 있어 유용하다 생각한다.

불필요한 작업을 Tanstack Query 메서드를 활용해 가독성과 관리를 편리하게 할 수 있었던 것 같다.

Tanstack Query에는 다양한 메서드가 존재하기에 하나 씩 학습 하는 개념으로 공부해야겠다.