[React] React Query (1) - React Query를 사용해야 하는 이유

 

 

 

개요

방학 동안 진행할 프로젝트에서 React Query를 쓰게 되었다. 현업에서는 거의 필수라는 말을 듣고 이게 대체 뭐길래?! 싶었다. 프로젝트 프론트 리더분이 저번에 내가 만든 UMC 미션을 보시고, React Query를 쓰면 따로 로딩 화면을 만들지 않아도 된다고 하셔서 더 기대가 된다.

 

React Query란? 

 

React Query는 데이터 캐싱, Fetching, 동기화를 쉽게 해주는 라이브러리다. 

 

Redux 단점 

 

1. 장황한 Boilerplate 코드

  Redux 기본 원칙을 만족시켜야 하기 때문에 코드가 너무 장황해진다. Redux-toolkit을 써서 좀 줄였긴 하지만 여전히 하나의 API 요청을 처리하기 위해 여러 개의 Action, Reducer를 만들어야 한다. 

 

2. API 요청을 하는 코드가 개발자마다 다름

  사실 React Query와 Redux가 완전히 같은 기능을 하는 것은 아니다. Redux는 전역 상태 관리를 위한 라이브러리고, React Recoil은 데이터 동기화, 캐싱, Fetching을 위한 라이브러리다. 이렇게 보면 Api 요청을 할 때 Redux를 사용할 때 생기는 단점들은 당연하게도 느껴진다. Redux는 비동기 데이터를 관리하기 위한 라이브러리가 아니기 때문에 API 요청을 위한 규격화된 규칙이 없다. 따라서 개발자들마다 코드를 짜는 방식이 달라질 수밖에 없다. 

 

React Query를 쓰는 이유

 

카카오 기술 블로그에서는 다음과 같이 말하고 있다.

https://tech.kakaopay.com/post/react-query-1/

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그

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

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

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

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

 

- React-Query는 다른 상태관리 라이브러리들에 비해 코드가 간결하고 구조가 단순하다.

- 데이터 캐싱이 가능하다.

- Hooks처럼 쓸 수 있다.

- Redux는 전역 상태 관리 라이브러리로, 여러 컴포넌트 간 상태를 공유하는 데 적합한데, React Query는 컴포넌트 수준에서 비동기 데이터를 관리하기 때문에 간단하고 직관적이다.

- API 요청을 위한 규격화된 방식이 있어 효율적이다.

- 사용자 경험 향상을 위한 Buit-in 기능들이 있다.