본문 바로가기
TIL & WIL & 회고록/TIL

2022.09.21 / react-query

by 쪼짱 2022. 9. 22.
728x90
반응형
SMALL

오늘 한 일

  • 리액트 쿼리 사용법을 알아봄
  • 알림 기능 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로 비동기 통신 관리

 

 

728x90
반응형
LIST