2022.09.21 / react-query

오늘 한 일

• 리액트 쿼리 사용법을 알아봄
• 알림 기능 SSE로 결정함
• 백엔드와 작업 전 get, delete 모듈을 만듦

 

내일 할 일

• 백엔드와 기능 맞춰보기!!!

 

React-Query 소개

• Redux를 사용한 API 요청과 비동기 데이터 관리의 불편함을 해소하기 위해 React Query를 도입하여 사용함
• React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리

 

React-Query 장점

1. 서버사이드 상태 관리와 관련된 여러 가지 반복적인 작업들을 손쉽게 처리할 수 있음

• 데이터뿐만 아니라 isIdle, isLoading, isFetching, isSuccess, isError등과 같은 여러 가지 부가적인 상태 값들도 제공
• query key를 통하여 데이터 캐싱과 각 쿼리 간에 디펜던시 조작 가능
• useEffect로 처리했던 여러 가지 상황들을 refetchOnMount, refetchOnReconnect, refetchOnWindowFocus와 같은 옵션으로 쉽게 처리할 수 있음
• keepPreviousData 옵션이나 useInfiniteQuery를 사용하여 페이징 기능도 쉽게 구현할 수 있음
• useQueries를 사용하여 병렬처리가 가능함

2. React Context와 Hook으로 구성되어 있어 React 사용자들에게 매우 친숙함

• 별도의 러닝 커브가 필요하지 않습니다.
• Redux-saga에서 사용하는 여러 가지 saga 명령어들과 Generator 개념이나, React-observable에서 사용하는 RxJS와 같은 추가적인 개념들을 공부하지 않아도 됩니다.

3. Suspense도 쉽게 사용할 수 있음

4. GraphQL과도 사용할 수 있음

5. SSR에서 사용할 수 있는 방법도 지원하고 있음

 

 

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유

React-query로 비동기 통신 관리