[React-Query]리액트 쿼리 Intro

 

최근 프로젝트들에서 계속 리액트 쿼리(React-Query)를 쓰고 있다.

 

리액트 쿼리를 써본 적이 없어서 처음 썼을 때 너무 어려웠고, 이후에도 필요에 따른 문법만 띄엄띄엄 대충 보고 작업을 하다보니 관련된 지식이 많이 모자라다는 생각이 자주 들었다.

 

이에 따라 강의를 듣고 좀 더 제대로 배울 필요가 있다는 생각이 들어 강의들을 찾아 보았다.

 

TanStack Query 공식 문서에서도 정식 강의가 있는데, 가격이 덜덜해서 포기하고 Udemy에 올라와 있는 리액트 쿼리 강의를 선택했다.

 

디테일한 설명과 미리 준비되어있는 코드들로 필요한 부분들만 code-along 하면서 공부할 수 있어 쾌적하고, 재밌었다.

 

아직 배웠던 지식을 실무에 많이 적용해보진 않았지만, 강의를 들어면서 흥미롭게 들었던 내용들과 정리가 필요한 내용들을 회고를 통해 나눠서 적어볼 예정이다.

 

---

Client State vs. Server State

리액트 쿼리는 비동기 상태 관리를 위한 라이브러리인데, 이를 이해하기 위해서는 Client state와 Server State의 차이를 알아야 한다.

 

by Megan_Rexazin_Conde

 

Client State는 웹 브라우저 세션과 연관된 모든 정보(데이터)를 칭한다.

 

클라이언트 사이드에서 관리하는 라이트 / 다크 모드 여부, 사용자 언어 등은 모두 Client State에 해당한다.

 

리액트에서는 useState, userReducer와 같이 내장되어 있는 훅을 통해서 관리한다.

 

Server State는 서버에 저장되어 있고, 사용자에게 표시해야 할 정보(데이터)를 칭한다.

 

현재 작성 중인 블로그 포스팅 내용, 서버에서 가져오는 사용자 예약 정보 등이 이에 해당 한다.

 

서버에서 가져오는 데이터는 비동기 처리를 통해 가져온 후 데이터를 사용해 화면을 랜더링하기 때문에 리액트 쿼리는 Server State를 가져오고 관리하는데 있어 편의성을 제공하는 라이브러리라고 할 수 있다.

 

그렇다면 왜 이토록 많은 사람들이 상태 관리 라이브러리인 리액트 쿼리를 사용하는걸까?

---

React-Query,  왜 쓰는걸까?

 

리액트 쿼리 관리자 Dominik Dorfmeister는 자신의 블로그 포스팅에서 다음과 같은 부분을 강조했다.

 

Data Fetching is simple.
Async State Management is not.

데이터를 가져오는 것은 간단할 수 있으나, 비동기 상태 관리는 쉽지 않다는 말이다.

 

그가 예시로 들었던 코드에서는 간단히 데이터를 가져오는 fetch 함수가 상태 관리 필요성에 따라 얼마나 길어질 수 있는지를 설명했다.

 

이 부분에 동의하고 공감한다.

 

프로젝트를 진행하다보면 하나의 페이지에서도 가져와야 할 데이터가 여러가지가 되고, 이에 따라 필요로 하는 데이터들을 잘 분류하고 관리해야 한다고 느낀다. 

 

카카오페이 기술 블로그에서는 리액트 쿼리를 사용하는 이유를 크게 세 가지로 들고 있다.

 

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

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

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

 

또한 강의의 저자인 Bonnie Schulkin은 다음과 같은 이유로 리액트 쿼리 사용을 권장했다.

 

1. Axios / Fetch API 대신 리액트 쿼리를 사용해 캐싱할 수 있어 불필요한 서버 통신을 줄일 수 있다.

2. isLoading, isFetching 등 데이터 통신에 있어 필요한 기능들을 사전에 제공받아 보다 편하게 사용할 수 있다.

 

겹치는 부분들도 있지만, 리액트 쿼리를 통해 제공되는 편의는 너무나도 다양하고 유용하다.

 

러닝 커브가 있지만, 사용법만 잘 알고 있다면 개발 편의를 크게 개선해 효율을 높일 수 있는 라이브러리라고 생각한다.

 

물론 안 써도 된다.

 

앞서 언급했듯, 해당 라이브러리를 "잘" 사용하기 위해서는 러닝 커브가 있다. 실제로 강의를 듣기 전의 나도 사용하는데 있어 어려움이 있었다.

 

하지만 프로젝트 성격을 고려했을 때 리액트 쿼리를 사용하는 것에 이득이 있다면, 안 쓸 이유가 있을까?

---

참조

• https://tkdodo.eu/blog/why-you-want-react-query
• https://tech.kakaopay.com/post/react-query-1/