[React] React-Query를 사용하는 이유? (Feat.Redux)

React-Query

React-Query를 사용하는 이유

 

React-Query는 React 애플리케이션에서 데이터를 관리하기 위한 비교적 새로운 라이브러리다. 애플리케이션에서 데이터 가져오기, 캐싱 및 업데이트를 위한 간단하고 강력한 솔루션을 제공한다. 이 글에서는 React-Query를 자세히 살펴보고 Redux말고 React-Query를 사용해야 하는지 살펴보자.

---

1. React-Query란 무엇인가?

React-Query는 React 애플리케이션에서 비동기 데이터를 관리하는 방법을 제공하는 라이브러리다. 가볍고 사용하기 쉽고 유연하게 설계되었다. 캐시를 사용하여 데이터를 저장(Caching)하므로 API에서 데이터를 한 번 가져온 다음 애플리케이션 전체에서 재사용(refetch)할 수 있다. 지금은 React-Query v4가 되면서 TanStack Query로 이름이 변경되었다.

https://tanstack.com/query/latest

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

---

2. Redux말고 React-Query를 사용해야하는 이유?

Redux는 많은 React 애플리케이션에서 사용되는 상태 관리 라이브러리다. Redux는 데이터 관리를 위한 강력한 솔루션일 수 있지만 복잡하고 설정하기 어렵다. 반면에 React-Query는 데이터 관리를 위한 더 간단하고 유연한 솔루션을 제공한다. 다음은 Redux보다 React-Query를 사용해야 하는 이유를 알아보자.

반응형

1. 코드 간소화

React-Query는 복잡한 Action 및 Reducer 없이도 데이터를 가져오고 관리할 수 있는 간단한 API를 제공한다. Redux-saga와 같은 미들웨어 없이 React-Query만으로도 처리 가능하기 때문에 코드를 더 쉽게 작성하고 유지 관리할 수 있다.

2. 내장 캐싱

React-Query는 캐시를 사용하여 데이터를 저장한다. 즉, 데이터를 한 번 가져와 애플리케이션 전체에서 재사용할 수 있다. 이렇게 하면 수행해야 하는 API 호출 수를 줄여 애플리케이션의 성능을 향상시킬 수 있다.

3. Boilerplate 감소

Redux를 설정하려면 많은 보일러플레이트 코드 + 미들웨어가 필요하다. 반면에 React-Query는 설정이 거의 필요하지 않으며 애플리케이션에 쉽게 통합될 수 있다.

4. Hook 지원 (Client/Server data)

React-Query는 React와 원활하게 작동하도록 설계되었다. 데이터 가져오기 및 관리를 React 구성 요소에 쉽게 통합할 수 있는 Hook을 제공한다.

React Query는 데이터를 가져오기 위한 useQuery, 데이터 업데이트를 위한 useMutation, 페이지에서 데이터를 가져오기 위한 usePaginatedQuery를 포함하여 서버 데이터를 관리하기 위한 여러 가지 방법을 제공한다. 또한 데이터 캐싱 및 자동 다시 가져오기 옵션도 제공한다.

클라이언트 데이터의 경우 React Query는 캐시에 액세스하고 클라이언트 데이터를 직접 조작할 수 있는 useQueryClient 를 제공한다. 이는 양식 상태 또는 사용자 기본 설정과 같이 서버에서 가져올 필요가 없는 데이터를 관리하는 데 유용할 수 있다.

---

3. 카카오가 Redux에서 React-query로 전환한 이유

https://youtu.be/YTDopBR-7Ac