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
:D