해당 글은 React Query 초심자들을 위한 글을 작성해보려고 합니다. 제가 React Query 를 실무에서 사용하면서 고민했던 부분들을 통해서 설명드려보려고 합니다. 제가 참여하고 있는 프론트엔드 오픈 채팅방에서, 프론트엔드 개발자 약 150명을 상대로 React 에서 현재 사용하고 있는 라이브러리 투표를 진행한 결과, 대다수인 약 90명의 개발자들이 React Query를 사용하고 있었습니다. React 생태계에서 이처럼 인기 많은 라이브러리인 React Query 에 대해서 설명을 해보려고 합니다.
React Query 란 무엇인가 ?
우선, React Query 가 무엇인지 알아봅시다. React Query의 공식 사이트에서는 자신들을 어떠한 라이브러리라고 표현하고 있는 지, 알아봅시다.
Powerful asynchronous state management for TS/JS, React, Solid, Vue, and Svelte. Toss out that granular state management, manual refetching, and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date, auto-managed queries and mutations that directly improve both your developer and user experiences
출처 : https://tanstack.com/query/v3/
위의 글을 해석하면, React Query 공식사이트에서는 자신들을 강력한 비동기 상태 관리 라이브러리 이며, 세밀한 상태 관리, 수동 리페칭, 끝없는 비동기 스파게티 코드를 버리라고 말하고 있습니다. 저는 이 부분에서 인상 깊게 본 부분은 " 끝 없는 비동기 스파게티 코드를 버려라 " 하는 부분이였습니다. 저는 아주 간단한 데이터를 불러오는 코드에서, React Query를 굳이 사용해야하는 가라는 생각을 가진 적이 있었습니다. 그러나, 굳이 안 사용할 이유도 없을 뿐 더러, React Query 는 비동기 통신을 할 때에 만들어질 스파게티 코드를 편하게 해주고 있었던 것 입니다. 즉, 다시 말하자면, 공식사이트에서 자신들이 말하고 있는대로, 개발자의 경험을 향상시켜주고 있었던 것 입니다. 이 부분에 대해 잘 설명하고 있는 블로그를 아래에 첨부하겠습니다.
https://tkdodo.eu/blog/why-you-want-react-query
언제 React Query 를 사용해야 하는 가?
그렇다면 , 우리는 어떠한 경우에, React 에서 React Query 라는 라이브러리를 사용해야 하는 가 에 대해 생각해보자. 내 생각에는 비동기 로 데이터를 처리하는 어떠한 프로젝트라면, React Query 를 쓰는 것이 좋다고 생각이 든다. 위에서도 말했듯이 , 비동기 스파게티 코드를 버리고 , 훨씬 깔끔하게 코드를 만들 수 있을 것이다.
React Query 를 사용하기로 했다면 , 다음으로 고민해야 하는 것은 어떠한 경우에 어떠한 API 기능을 사용해야 하는 가이다. 나도 처음에 React Query를 배웠을 때에는 useQuery 만 존재하는 것인 줄 알고 있었다. 그러나, 이 외에도 pagination 을 도와주는 useInfiniteQuery 등 여러가지가 있는데, 제가 중요하게 나눠야 하는 것은 다음 두가지라고 생각합니다.
데이터를 단순히 서버로 부터 가져오는 것인가? 이러한 경우에는, useQuery 를 통해서 불러오는 것이 적합하고, 데이터를 생성, 업데이트, 삭제하는 경우에는 useMutation을 주로 사용하게 됩니다.
다음으로, 간단하게 useQuery 에 대해서 살펴보도록 하려고 합니다.
const { data , isLoading , error } = useQuery ({
queryKey : ['todos']
// 위의 'todos'는 쿼리 키이고, 캐싱과 관련하여 아주 중요한 부분이다.
queryFn : fetchData ,
// 위의 "fecthData" 는 fetch 또는 axios를 통해, 비동기 방식으로
// 데이터를 불러오는 함수이다 .
staleTime: 5000, // 데이터가 새로움으로 간주되는 시간 (밀리초)
cacheTime: 100000, // 캐시된 데이터가 메모리에 유지되는 시간 (밀리초)
refetchOnWindowFocus: true, // 윈도우 포커스 시 데이터를 다시 가져올지 여부
// 이외에도, 여러 옵션들이 존재하므로, 공식문서를 통해
// 필요한 옵션을 사용하면 될 듯 하다.
})
다음과 같이, useQuery 를 사용 할 수 있습니다. 여기서 자세히 살펴볼 부분 중 하나가 바로 쿼리 키 ( Query Key ) 입니다. QueryKey를 어떻게 사용하냐에 따라서, 코드를 확연히 줄일 수 있습니다. 검색조건에 따라서, 데이터를 조회해오는 파트에서, queryKey 에 검색 조건을 넣어버리면서, 검색조건이 바뀌면, 자동적으로 해당 쿼리를 받아오게 했습니다. 검색 조건에 따라 , useQuery 를 불러오는 또 다른 문을 따로 만들 필요가 없다는 것이다. 이처럼 , useQuery 를 잘 이용하면 , 편하고 쉽게 비동기데이터를 처리 할 수 있을 뿐만 아니라, 복잡한 코드를 안 만들고 남들이 보기에도 쉬운 코드가 만들어지게 됩니다. 더 자세한 부분은 React Query 공식 홈페이지를 보면서, 파악하면 더 많은 도움이 될 것입니다.
