[React Query] 전역 상태로 사용하기

React Query

[React Query] 전역 상태로 사용하기

---

React Query를 Redux처럼 전역상태관리 용도로 사용할 수 있다.

 

반응형

 

HOW?

상위 레벨 컴포넌트에서 queryClient.setQueryData()로 데이터를 set하고, 해당 데이터가 필요한 (자식) 컴포넌트에서 queryClient.getQueryData()로 사용하면 된다.

 

예시

// QueryKey.ts: 쿼리키 상수화(프로젝트 정책에 따라)
export const headersQueryKey = ["HeadersData"];

// index.tsx
const queryClient = new QueryClient();
const reqHeaders = getRequestHeader(headers);

queryClient.setQueryData(headersQueryKey, () => reqHeaders);

// child.tsx
const queryClient = new QueryClient();

const headers = queryClient.getQueryData<ReqHeaders>(headersQueryKey);

 

결론

위 예제처럼 React Query를 전역상태 관리 툴로 쓸 수 있다. 컴포넌트의 depth, 위치에 관계없이 전역 데이터에 접근할 수 있어 상당히 편리하다. 하지만 관리할 QueryKey가 늘어나고 React Query 본래 용도에 맞는 건지 의문이 든다.

이 방식이 좋은 코드인지는 생각해볼 문제다.

 

 

 

참고

- Tanstack Quert v4 DOC: https://tanstack.com/query/v4/docs/react/overview