[React] TanStack Query 1. 소개 및 설치

리액트 쿼리 React Query

• 리액트 어플리케이션에서 서버 상태를 효율적으로 관리하는 라이브러리

클라이언트 상태 Client State

• 사용자 인터페이스 UI와 관련 된 상태
• ex) 모달의 오픈 여부, 언어, 테마 등
• useState
• 서버에서 일어나는 일과 관련 없음
• 주로 유저 액션에 의해 변경, 클라이언트 내부에서만 관리되고 업데이트 됨

서버 상태 Server State

• 서버에 저장되지만 클라이언트에 노출하는데 필요한 데이터
• ex) DB의 상품 정보
• 서버 -> 클라이언트로 전송 (GET)
• 클라이언트 -> 서버로 전송 (POST,PUT,DELETE)

리액트 쿼리의 장점

• 간편한 데이터 fetching : 훅 이용, 데이터를 쉽게 가져올 수 있음
• 자동 캐싱 : 한번 가져온 데이터는 캐시에 저장되고, 동일한 요청이 반복되면 데이터를 재활용해서 네트워크 요청을 줄임
• 동기화, 백그라운드 업데이트 : 데이터가 오래되었거나, 다시 필요할 때 자동으로 백그라운드에서 데이터 갱신
• Optimistic Update (낙관적 업데이트) : 서버 응답 전에 UI 먼저 업데이트, 좋은 UX 제공
• 성공, 에러, 로딩 상태 관리 : 성공, 에러, 로딩 상태 쉽게 구분해서 처리

설치

• npm i @tanstack/react-query