React-Query 란?

React-Query 란?

리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 data fetching 라이브러리.

Server-side 와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해준다.

 

React Query 내에서의 Server State 정의

• Client가 제어하거나 소유하지 않는 위치에서 원격으로 유지됨.
• fetching 및 updating을 위한 비동기 API를 필요로 함.
• 상태가 공유되며 사용자 모르게 변결될 수 있음.
• 주의하지 않으면 애플리케이션이 잠재적으로 "out of date" 상태가 될 수 있음.

 

React Query의 특징 (Server State 제외)

• Caching 지원
• 동일한 데이터에 대한 중복 요청을 제거하고 한 번만 요청하도록 함.
• "out of date" 상태의 데이터를 파악하고 updating 지원.
• Pagination 및 Lazy Loading 성능 최적화.
• Server State의 메모리 관리 및 garbage collection 지원.
• React Hooks와 유사한 인터페이스 제공.

 

React Query 에서 Server State를 모델링하는 과정

React Query - Async States

1. Fetching

   초기 상태이며 백엔드와 같은 외부 소스로부터 데이터를 가져오기 위하여 동작.

2. Fresh

   Fetching 이후에 Server-Side 와 Client-Side의 데이터가 동일하게 유지되는 상태.

3. Stale

   데이터가 오래된 상태이며 Fetching을 통해 Fresh 상태로 유지해주어야 하는 상태.

4. Inactive

   애플리케이션에서 사용되지 않는 데이터에 대한 상태. React Query에서 브라우저 캐시를 관리하는 가비지 컬렉터에 의해 삭제됨.

5. Deleted

   Inactive 상태의 데이터가 캐시에서 삭제된 상태.

 

React Query 의 장점

「if(kakao)2021 - 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유」

 

1. React Application에서 서버 상태를 불러오고, caching하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리

2. 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있음.

3. 더 나아가 React Query에서 제공하는 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한  작업없이 "핵심 로직"에 집중할 수 있음.