리액트 쿼리

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

 

일반적인 연결을 넘어 응답값 캐싱, 무한 스크롤을 위한 메서드등 다양한 기능들을 지원해주고 있는 라이브러리이다.

React Query는 서버로부터 데이터를 요청하고 처리하기 위한 라이브러리로, RESTful API, GraphQL 등 다양한 형태의 데이터 요청을 처리할 수 있다.

React Query는 캐시와 리패칭 기능을 제공하여 데이터 요청 및 처리의 성능을 최적화할 수 있다. 또한, 서버로부터 받은 데이터를 쉽게 관리하고 활용할 수 있도록 도와준다.

 

장점

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

 

쿼리는 고유키에 연결된 데이터의 비동기 소스에 대한 선언적 종속성을 갖고 있다.

 

React Query는 원격 데이터를 전역 상태로 관리해야만 하던 문제를 해결할 수 있는 완벽한 훅 라이브러리 사용자가 데이터를 불러올 곳을 라이브러리에 알려주기만 하면, 캐싱, 백그라운드 업데이트, 오래된 데이터 교체까지 어떠한 추가 코드나 설정도 없이 해결 React Query는 또 useState와 useEffect 훅을 몇 줄의 React Query만의 방식으로 대체 가능하다. 

 

useQuery
데이터를 get 하기 위한 api
post, update는 useMutation 사용
첫번째 파라미터는 unique key, 두번째 파라미터는 비동기 함수(api호출함수)

useMutation
값을 바꿀 때 사용하는 api. return 값은 useQuery와 동일

 

*참고자료

react-query 개념 및 정리

 

공부 한 내용을 바탕으로 작성한 글이고 앞으로 더 작성할 예정이다.