[React] React-Query 사용법 예제코드

리액트 쿼리

리액트 쿼리는 비동기 네트워크 상태관리 라이브러리이다.

리액트 쿼리는 React 컴포넌트에서 데이터를 가져오고 관리하기 위한 간단하고 직관적인 방법을 제공한다.

이를 통해 컴포넌트가 더욱 유연하고 재사용 가능하며, 다양한 데이터 소스에서 데이터를 쉽게 가져올 수 있다.

 

리액트 쿼리는 대표적으로 useQuery와 useMutation과 같은 React Hooks를 사용하여 작성된다.

이를 통해 데이터 로딩과 변경을 처리할 수 있다.

 

useQuery는 GraphQL, 또는 REST API와 같은 데이터 소스에서 데이터를 가져오는데 사용되며

useMutation은 데이터를 업데이트하거나 삭제하는 데 사용된다.

 

리액트 쿼리는 캐싱을 사용하여 데이터를 저장하고, 새로운 데이터를 로드하기 전에 캐시에서 데이터를 가져온다.

이를 통해 성능을 향상시키고 네트워크 요청 수를 줄일 수 있다.

 

 

설치하기

 

https://tanstack.com/query/v3/docs/react/installation

TanStack Query 홈페이지에서 리액트 쿼리를 설치할 수 있다.

 

npm i @tanstack/react-query
yarn add @tanstack/react-query

 

예제코드

React-query를 사용하기 위해서는 사용하고자 하는 곳에서 new QueryClient()를 통해 객체를 생성하고

해당 객체를 사용하고자 하는 컴포넌트를 <QueryClientProvider client={방금 만든 객체}>로 감싼다.

 

이제 네트워크 통신이 필요한 컴포넌트에서 리액트 쿼리를 사용해주기만 하면된다.

 

다음 코드는 product 데이터가 들어있는 json 데이터를 네트워크 통신을 통해 가져오는 로직이다.

해당 데이터를 리액트 쿼리로 관리하기 위해서는 useQuery 훅을 사용하면 된다.

 

첫번째 인자로 배열이 들어가는데, 배열에는 데이터를 관리하기 위한 고유한 쿼리 key를 입력한다.

문자열이 아닌 배열인 이유는 키의 조합에 따라 각각 다른 네트워크 상태를 가지고 있기 때문이다.

위에 코드에서는 "product"와 함께 checked라는 값을 키로 추가해줬는데, checked의 값이 true인지, false인지에 따라서 각각 다른 네트워크 상태를 갖는다는 말이다.

react-query devtool

상품 목록에서 버튼을 누르면 checked가 true가 되면서 세일중인 상품 목록을 불러온다.

즉 리액트 쿼리에서 같은 product지만 checked가 true인지 false 인지에 따른 key값을 따로 가지고 관리를 한다.

 

두번째 인자로는 네트워크 통신을 하기 위한 콜백함수를 async(비동기)로 입력해준다.

 

세번째 인자로는 useQuery의 옵션값이 들어가는데 위 코드에서 보이는 staleTime은 네트워크 통신을 통해 받아온 데이터를 5000ms(5초)간 최신 상태로 유지하겠다는 말이다.

이 말이 무슨 말이냐면 리액트 쿼리가 네트워크 통신을 하는 시점이 여러가지가 있는데(화면이 포커스 되거나 상태가 변경 될 때 등) slate 타임을 5초로 지정하면 5초간은 네트워크 통신을 재요청하지 않는다. 

 

리액트 쿼리의 장단점

장점

• 캐싱을 사용하여, 새로운 데이터를 로드하기 전에 캐시에서 테이터를 가져오기 때문에 성능을 향상시킬 수 있음.
• 에러를 처리하기 위한 강력한 방법을 제공함
• 컴포넌트를 더욱 단순화 시킬 수 있다.
• 다양한 데이터 소스에서 데이터를 쉽게 가져올 수 있음

단점

• 코드량이 늘어나는 측면이 있어 처음 이해하는 것이 조금 어려울 수 있다.