React Query란?

데이터 Fetching, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리이다. 이 외에도 React에서 상태 관리를 하기 위해 MobX, Redux 등 여러 라이브러리가 존재한다.

상태 관리

그렇다면 상태 관리란 무엇일까? 굳이 해야할까?
상태 관리는 State Management를 한국어로 직역한 단어로 데이터를 관리하는 방법이다.
초창기에는 백엔드 서버에서 브라우저의 요청에 따라 웹 페이지를 동적으로 렌더링 해주었기 때문에 프론트에서는 상태관리는 물론, 프론트 서버조차 필요가 없었다.
하지만 서버의 부하를 줄이고 더 많은 사용자들에게 원활한 서비스를 제공, 페이지 렌더링과 UI 작업 처리를 위해 프론트 서버를 두기 시작했다.

• 프론트엔드의 상태 관리

  프론트에서의 상태관리란 데이터를 설계된 UI, UX에 맞게 설계하고 구현하는 일이다. 또한 네트워크를 통해 서버로 전달되는 클라이언트의 요청에 따라 변화하는 상태를 관리하는 일이다.

  1. 데이터를 설계된 UI, UX에 맞게 설계하고 구현하는 일
  2. 네트워크를 통해 서버로 전달되는 클라이언트의 요청에 따라 변화하는 상태를 관리하는 일

React Query의 장점

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

1. React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다.
2. 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있습니다.
3. 더 나아가 React Query에서 제공하는 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 “핵심 로직”에 집중할 수 있습니다.

👉 프론트에서 비동기 데이터를 불러오는 과정 중 발생하는 문제들을 해결해준다!

캐싱(Caching)

캐싱이란 특정 데이터의 본사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것을 말한다. 자세한 내용은 여기를 참고 바란다.
React-Query는 캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 우리는 이를 통해 API 요청을 줄이기 때문에 서버에 대한 부하를 줄일 수 있다.

• 데이터 갱신

  그렇다면 캐싱이 필요한 상황은 언제일까? 크게 3가지로 나눌 수 있다.

1. 화면을 보고 있을 때
2. 페이지의 전환이 일어났을 때
3. 페이지 전환 없이 이벤트가 발생해 데이터를 요청할 때

React-Query 옵션

캐싱을 위해 위해 React-Query에서는 기본적인 옵션을 제공한다.

refetchOnWindowFocus,
refetchOnMount, 
refetchOnReconnect,
staleTime, 
cacheTime, 

1. 브라우저에 포커스가 들어온 경우(refetchOnWindowFocus)
2. 새로운 컴포넌트 마운트가 발생한 경우(refetchOnMount)
3. 네트워크 재연결이 발생한 경우(refetchOnReconnect)

• Stale Time

  • 비유하자면 "과자의 유통기한"
  • 과자의 유통기한이 지났다면 그 과자는 신선하지 않다.
  • 데이터가 신선한 상태로 남아 있는 시간을 말한다.
  • 리액트 쿼리에서 데이터는 fresh한 데이터일 수도, stale한 데이터일 수도 있다.
    - fresh한 데이터라면, API 호출 없이 저장된(캐싱된) 데이터가 다시 사용한다.
    - stale한 데이터라면 신선한 데이터를 다시 페치해 온다.

• Cache Time

  	- 비유하자면 "공부를 하기 위해 휴식을 취하는 시간"

  • 공부를 하기 전 휴식을 취해 에너지를 모으는 시간이다.
  • 어떤 정보를 임시로 저장한 후 삭제될 때까지의 시간을 말한다.

Client 데이터와 Server 데이터 간의 분리

Client Data: 모달 관련 데이터, 페이지 관련 데이터 등
Server Data: 사용자 정보, 비즈니스 로직 관련 정보 등

비동기 API 호출을 통해 불러오는 데이터들을 Server 데이터라고 할 수 있다.

하지만 대부분의 상태 관리 라이브러리들은 Client 데이터를 관리하는 데 로직이 집중되어있기 때문에, Server 데이터까지 효율적적으로 관리하기에는 한계가 존재한다.

• React-Query 해결책

  다음 로직을 통해 Server 데이터를 가져오고 있는데, onSuccess와 onError 함수를 통해 fetch 성공과 실패를 분리해주었다. 이를 통해 Server 데이터를 불러오는 과정에서 구현해야할 추가적인 설정들을 진행할 필요가 없다.

간단하게 Client 데이터는 상태 관리 라이브러리가 관리하고, Server 데이터는 React-Query가 관리하는 구조이다.

대표적인 기능

React-Query에서 data fetching을 위해 제공하는 대표적 기능들 중 GET에는 useQuery가 사용된다. PUT, UPDATE, DELETE에는 useMutation이 사용된다.

• useQuery

  • 각 상황 별 분기를 쉽게 진행할 수 있다.
  • isLoading을 통해 로딩 여부를, error를 통해 발생 여부를, data를 통해 성공 시 데이터를 반환할 수 있다.

• useQuery 동기적으로 실행

  • useQuery에서 enavled 옵션을 사용하면 비동기 함수인 useQuery를 동기적으로 사용 가능하다.

• useQueries

  여러 개의 useQuery를 한 번에 실행하고자 하는 경우 반환값이 배열로 묶여 반환된다.
  

• useMutation

  PUT, UPDATE, DELETE 와 같이 값을 변경할 때 사용하는 API다.

그 밖의 기능

• Devtools

  React-Query에서는 공식적으로 react-query/devtools 를 통해 Devtool을 지원한다.
  개발 모드에서만 사용하며, devtools를 통해 좀 더 확실하게 데이터의 흐름을 파악할 수 있다.

• 무한 스크롤 구현

  React-Query에는 getPreviousPageParam, fetchPreviousPage, hasPreviousPage 와 같은 다양한 페이지 관련 기능이 존재해 이를 이용해 무한 스크롤을 쉽게 구현할 수 있다.

• Selectors
  React-Query에서는 select 키워드를 사용해 원하는 데이터를 추출하여 반환할 수 있다.

💡

• 서버 부하

  실행중인 프로세스의 양과 대기 중인 프로세스의의 양을 모두 합친 전체 프로세스의 양

• UI & UX

  UI는 사람들이 제품과 상호 작용하는 미적 요소를 말하고, UX는 사용자가 제품 또는 서비스에 대해 갖는 경험에 관한 것

• useQuerire

  React Query에서 제공하는 여러 개의 쿼리를 동시에 처리할 수 있는 훅이다.
  

• ['unique-key']

  데이터를 식별하고 구분하기 위한 고유한 식별자이다.
  데이터를 전달할 때, 각 데이터가 무엇인지 알아볼 수 있게 해주는 일종의 이름표나 태그이다.

• 동기 & 비동기

  동기는 순서대로 진행되고, 비동기는 기다리지 않고 여러 작업이 동시에 일어나는 것이다.

• 무한 스크롤(Infinite Scroll)

  사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX)방식이다.