useQuery

그동안 서버상태를 가져다 리액트 기반의 앱에서 화면에 표출하려면 참 많은 방법들을 사용했었다. 뭐 직접 axios 같은 것을 호출해서 useState 를 업데이트 하기도 하고 좀 더 고급진 방법으로는 redux 와 같은 상태관리 라이브러리 내에서 미들웨어를 통해서 api 를 호출하고 그 결과를 store에 담아서 사용하고 등등 많은 방법이 있었다.

첫번째 방법으로 사용한다면 해당 데이터는 그 컴포넌트에서 밖에 쓰지 못한다. 두번째 방법으로 하면 자연스레 데이터가 전역데이터 관리 라이브러리 속에 들어가니 어디서든 꺼내 쓸 수는 있다만 redux 라는 것 자체가 코드가 참 복잡스럽고 장황하다. 더더군다나 원래 전역상태 관리를 위한 녀석에게 미들웨어라는 것을 도입하여 비동기 데이터를 처리하다 보니 뭐 많이 복잡하다.

그러던 와중에 React Query 라는 녀석이 나왔고 사용해보게 되었다.

기본사용법

이건 굳이 내가 쓰지 않아도 공식문서나 그런 곳에 보면 잘 나와있다. 보통 get 방식의 api 값을 가져다 쓸 수 있게 해준다.

내가 원한 것 혹은 찾던 것

내가 원한 건, 한번 api 호출로 받은 데이터를 다른 컴포넌트에서는 어떻게 쓰지? 얘네 소개하는 거 보면 서버 상태를 전역으로 관리해준다는데 어떻게 써야하지? 였다.

const orderData = useQuery('orderList', getOrder);

이것이 useQuery의 기본적인 사용법이다. 첫번째에 들어가는 orderList 는 쿼리 키 라고 하여서 고유한 값이 된다. 그리고 두번째 들어가는 것은 쿼리 함수이다. 즉, api 를 호출하고 받아오는 그런 녀석이다. 그래서 문서에 보면 저 둘은 필수값으로 되어 있다. 그 뒤에 옵션 내용들을 넣을 수 있는데 그 역시 공식 문서에서 보면 다 나온다.

오늘은 staleTime 에 대해서 다뤄보고자 한다.

A컴포넌트에서 로딩한 걸 B 혹은 C컴포넌트에서 쓰고 싶다고

대충 코드의 구성을 보면 orderList 에 해당하는 쿼리 키가 고유한 값이라고 했으니 저걸 부르면 뭔가 될 거 같다. 근데 쿼리 함수도 필수값이라고 한다. 한번 불렀던 걸 그대로 가져다 쓰고 싶은데 불렀던 컴포넌트를 벗어나서는 어떻게 가져다 쓸까? 키만 넣으면 안된다는데? 쿼리 함수 넣으면 또 api 호출하는데? 그러면 전역에 캐싱하는게 맞아?

답은 staleTime 에 있었다.

staleTime

staleTime 은 useQuery 의 세번째 인자인 option 항목에 들어간다. 기본설정은 0ms 이다. 그러다보니 A에서 부른 데이터를 같은 쿼리 키를 갖고 B나 C 컴포넌트에서 사용한다고 해도 계속 api 를 호출하게 된다. 저 옵션을 넣어주면 다음과 같이 만들 수 있다.

// A.jsx
const orderList = useQuery('orderList', getOrder, {
	staleTime: 10000
});

// B.jsx
const {data, isLoading} = useQuery('orderList', getOrder, {
  staleTime: 5000
})

같은 식이 된다. A에서 B 컴포넌트로 이동할 때, 5초 이내에 이동하면 B.jsx 에서는 A.jsx 에서 불러왔던 데이터를 그대로 가져다 쓸 수 있다. 그리고 B에서 A로 10초 이내에 이동하면 api 호출을 하지 않고 기존에 데이터를 갖고 화면을 그린다.

즉, 쓰려고 하는 쪽에서 staleTime 을 잘 설정 해놓으면 api 를 호출하는 쿼리 함수가 있어도 api 호출을 하지 않고 기존의 데이터를 갖고 사용한다.

결론

사실 이건 좀 더 정통한 개발에 대한 지식이 있고 영어가 좀 더 된다면 공식문서를 보고 알아냈을 수 있는 부분이기도 하지만 설명이 좀 직관적인 거 같지는 않았다. (내가 못찾는 것이었을 수도..) 암튼 이런 식으로 사용하면 꽤나 편하게 의도하는대로 react query 를 사용할 수 있을 거 같다.

나는 이제 늙어서 젊은 친구들처럼 뭔가 막 번역하고 그런 거를 하기엔 부담스럽다. 쓰면서 깨우친 것들, 알았던 것들을 나처럼 정통으로 전공하지 않았지만 어째뜬 이 바닥에서 먹고 사는 사람들이 좀 더 쉽게 알아듣기 좋은 방법으로 남기고자 한다.