1011-리액트쿼리

[SJC-s]

• useQuery
  • React 애플리케이션에서 데이터 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 처리할 수 있게 해주는 라이브러리인 React Query에서 제공하는 훅(hook)
  • 서버에서 데이터를 가져와 상태를 관리하고, 그 데이터의 로딩, 에러 상태 등을 처리하는 데 사용
  • 설치 : npm install react-query
  • bookables 목록을 요청하는 컴포넌트가 2군데
  • 예약자원(BookablesView), 예약(BookingsPage) 에서 useFetch(fetch) 를 각각 요청해서 데이터를 받아옴
  • 문제점 : 네트워크 지연시 사용자 요청에 대한 반응이 전체적으로 늦어짐
  • user 목록을 요청할 때도 UserList, UserPicker 컴포넌트에서 같은 fetch 실행

[SJC-s]

• useQuery 리턴값 : fetch 결과는 data 프로퍼티에 저장, 프로퍼티값은 bookables 에 저장
• status, error 추가적인 실행 상태 정보도 전달

  const {data: bookables = [], status, error} = useQuery(
      "bookables",
      () => loadData("http://localhost:3002/bookables")
  );
  // 첫번째 인자 : 브라우저에 저장된 cache 가져오기 key (문자열, 배열, 객체) 직렬화 가능한 타입
  // 두번째 인자 : 비동기 함수

• useFetch : 커스텀 훅(fetch 함수화)
• useQuery : 캐싱, 비동기 함수를 실행하기 전에 cache 에서 key 를 가져와서 컴포넌트에게 전달, 비동기함수는 백드라운드에서 실행, 변경된 데이터가 있으면 다시 반영

[SJC-s]

• 컴포넌트들의 리액크 쿼리 캐싱
  • 프로바이더 컴포넌트를 사용
  • new QueryClient() 객체를 생성하여 컴포넌트들에게 전달. 캐시 및 추가기능을 제공 -> App.jsx
  • useQuery 를 사용하여 데이터를 읽어온다. 데이터, 상태, 오류를 프로퍼티로 갖는 객체를 리턴
  • key 설정 : 캐시에서 데이터 식별. 키값에 해당하는 데이터를 즉시 반환하고 백그라운드에서 최신데이터를 fetch
  • 그래서 데이터를 읽어올 비동기 함수를 전달
  • key 는 문자열, 배열, 객체 모두 가능

[SJC-s]

• useQuery 리턴값 : fetch 결과는 data 프로퍼티에 저장, 프로퍼티값은 bookables 에 저장
• status, error 추가적인 실행 상태 정보도 전달(그림 참고)

[SJC-s]

useQuery-GPT