스파르타코딩클럽 내일배움캠프 TIL49

React Query

• React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리
• "global state"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트한다.
  https://react-query.tanstack.com/quick-start

Queries

• 쿼리는 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 메서드 포함)와 함께 사용할 수 있다.
• 제공한 고유 키는 애플리케이션 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하는 데 내부적으로 사용된다.
• useQuery에서 반환된 쿼리 결과에는 템플릿 및 기타 데이터 사용에 필요한 쿼리에 대한 모든 정보가 포함되어 있다.
  ex) const result = useQuery('todos', fetchTodoList)
  https://react-query.tanstack.com/guides/queries
  https://react-query.tanstack.com/reference/useQuery#_top

Query Key

• React Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리한다.
  https://react-query.tanstack.com/guides/query-keys

// App.jsx

 import {
   useQuery,
   useMutation,
   useQueryClient,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { ReactQueryDevtools } from 'react=query/devtools'
 import { getTodos } from '../my-api'
 
 // Create a client
 const queryClient = new QueryClient()
 
 function App() {
   return (
     // Provide the client to your App
     // QueryClientProvider에 감싸진 모든 것들이 queryClient에 접근할 수 있다.
     // ReactQueryDevtools 사용하면 웹사이트에서 리액트 쿼리를 확인할 수 있다.
     <QueryClientProvider client={queryClient}>
       <Todos />
       <ReactQueryDevtools initialIsOpen={true} />
     </QueryClientProvider>
   )
    
 function Todos() {
   // Access the client
   const queryClient = useQueryClient()
 
   // Queries
   // 두 개의 인자를 받는데, 첫번째 값은 querykey: 고유식별자, 두번째 값은 fetcher 함수
   // isLoading, data, error 리턴값이 있음
   // useState로 따로 저장해서 사용하지 않아도 됨!!
   // 데이터를 캐시에 저장해줘서 불필요한 데이터 요청을 받지 않음
   const query = useQuery('todos', getTodos)
   
   if {data.isLoading} return <div>isLoading...</div>
 
   return (
     <div>
       <ul>
         {query.data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
     </div>
   )
 }

// my-api.js

export const getTodos () => return fetch('주소').then(res => res.json())