[RN] React Query 기초 지식

React Query란?

• 리액트 쿼리는 API 연동에 특화된 라이브러리
• Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줌
• 서버의 값을 클라이언트에 가져오거나, 캐싱, 값, 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됨

 

사용하는 이유

API 호출을 통해 받아온 데이터를 useState를 사용하여 저장하였다고 가정하자.

해당 화면에서 머무르는 동안은 Hooks 함수로 인하여 변화하는 값을 계속해서 저장이 가능하다.

그러나 요청하는 API의 수가 많아질수록 그 과정은 더욱 복잡하고 귀찮아질 것이다.

컴포넌트 내부에 선언된 useState이기 때문에 사용자가 다른 화면으로 넘어가면 해당 변수에 저장된 값도 역시 사라진다.

따라서 나중에 다시 컴포넌트를 생성할 때 기존에 받아온 응답 결과를 사용하지 못하고

다시 API를 요청하여 useState 값에 삽입해야 한다는 번거로움이 있다.

 

즉, 캐싱이 불가능하다는 것이다 !!

 

캐싱을 위해서는 Context, redux, AsyncStorage와 같은 라이브러리로 관리할 수 있지만,

그렇게 할 시 코드가 복잡해질 수 있어 리액트 쿼리를 사용한다.

 

 

React-Query의 장점

1. 캐싱이 가능하다.
2. 데이터가 오래되었다고 판단되면 다시 get 할 수 있다.
3. 동일 데이터를 여러번 요청하는 경우에도 알아서 한번만 요청한다.
4. 비동기 과정을 선언적으로 관리할 수 있다.
5. get한 데이터에 대하여 update가 발생하는 경우 다시 자동으로 get을 수행한다.
6. react hook을 기반으로 데이터 로딩을 효율적으로 관리할 수 있다.

 

useQuery: 서버의 상태를 가져올 때 사용 → Read
useMutation: 서버의 데이터를 수정할 때 사용 → Create, Update, Delete