React Query란?

데이터 가져오기, 캐싱, 재요청 관리 등을 간편하게 처리하기 위한 라이브러리다. 클라이언트 사이드에서 API 호출 및 데이터 관리를 훨씬 쉽게 할 수 있게 도와준다.

데이터 관리와 네트워크 요청을 보다 효율적으로 처리할 수 있도록 도와주는 도구라는 인식을 확실하게 가질 필요가 있다. 그래서 이번 부트캠프를 할 때 사용했는데, 좀 더 자세하게 공부를 해보려 한다.

핵심 개념

1. Queries

데이터를 가져오는데 사용되는 쿼리다. useQuery 훅을 사용하여 데이터를 가져오고 자동으로 캐싱하며, 필요에 따라 자동으로 재요청도 수행한다. CRUD에서 Read에 해당되는 작업을 할 때 사용된다.

2. Mutations

데이터를 수정하는데 사용되는 뮤테이션이다. useMutation 훅을 사용하여 데이터 수정 작업을 처리하고, 자동으로 관련된 쿼리들을 재요청한다. CRUD에서 Create, Update, Delete에 해당되는 작업을 할 때 사용된다.

위의 두 작업이 프로젝트에서 주로 사용된 개념이다. 밑에는 추가적으로 중요한 개념이다.

3. Invalidations: 데이터가 수정될 때 캐시된 데이터를 유효하지 않게 만들어, 새로운 데이터를 가져오도록 유도하는 기능
4. 캐싱: React Query는 데이터를 자동으로 캐싱하여 같은 데이터를 반복해서 요청하지 않도록 함
5. 재요청 관리: 네트워크 연결이 다시 활성화될 때나 원하는 시점에 수동으로 재요청
6. Prefetching: 미리 데이터를 가져와서 사용자 경험을 향상시키는데 도움을 주는 기능.

장점과 사용할 때

React Query의 장점은 다음과 같다.

장점

• 캐싱 및 성능 최적화: React Query는 데이터를 자동으로 캐싱하여 불필요한 중복 요청을 방지하고 성능을 향상
• 복잡한 로직 간소화: API 호출, 데이터 가져오기, 데이터 변이 등 복잡한 데이터 관리 작업을 라이브러리가 단순화
• 자동 재요청 및 에러 핸들링: React Query는 네트워크 연결이 끊겼다가 복구되는 경우, 데이터의 유효기간이 만료된 경우 등에 자동으로 재요청하며, 에러 핸들링도 편리하게 처리

그래서 이러한 장점을 살려, 사용할 때는 크게 3가지라 본다.

1. API 호출 및 데이터 가져올 때
2. 데이터 캐싱 및 관리할 때
3. 데이터 변경 및 업데이트할 때

주로 이 3가지 상황에서 React Query를 사용한다.

정리하기

React Query는 데이터 관리와 API 호출을 간편하게 처리하기 위한 도구다. 이를 알고 있다면, 언제 사용해야 할 지 인지하고 있고 잘 활용하면 좋을 것 같다.