react-query

miin·2023년 11월 2일
0

React

목록 보기
48/55
post-thumbnail

react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리

react-query 상태

  • fresh: 새롭게 추가된 쿼리 & 만료되지 않은 쿼리 -> 컴포넌트가 마운트, 업데이트되어도 데이터 재요청 하지 않음
  • fetching: 요청중인 쿼리
  • stale: 만료된 쿼리 -> 컴포넌트가 마운트, 업데이트되면 데이터 재요청됨
  • inactive: 비활성화된 쿼리 -> 특정 시간이 지나면 가비지 컬렉터에 의해 제거
  • 가비지 컬렉터: 메모리 관리 방법 중 하나로, 프로그래머가 동적으로 할당한 메모리 영역 중 더 이상 쓰이지 않는 영역을 자동으로 찾아내어 해제하는 기능

장점

  • 캐싱
  • get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행 )
  • 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
  • 동일 데이터 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
  • 무한 스크롤 (Infinite Queries (opens new window))
  • 비동기 과정을 선언적으로 관리할 수 있다.
  • react hook과 사용하는 구조가 비슷하다.

useQuery

useQueries

useMutation

https://beomy.github.io/tech/react/tanstack-query-v4/

0개의 댓글