[React] React-Quries 기본사항

기본사항

쿼리는 기본적으로 유니크한 키로 구분되며 프로미스(Promise) 기반 메서드 (GET, POST 등)로 서버에서 데이터를 가져올 수 있다.

컴포넌트나 커스텀 훅에서 쿼리를 구독하려면 다음과 같이 useQuery 를 호출한다.

 import { useQuery } from 'react-query'
 
 function App() {
   const info = useQuery('todos', fetchTodoList)
 }

여기서 유니크한 키 는 Application 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하기 위해 내부적으로 사용된다.

const result = useQuery('todos', fetchTodoList);

쿼리의 상태는 4가지로 분류할 수 있다.

• isLoading , status === 'loading' : 데이터 가져오는 중
• isError, status === 'error' : 에러 발생
• isSuccess , status === 'success' : 쿼링 성공
• isIdle, status === 'idle' : 쿼링 불가능

쿼리 키(Query Keys)

react-query 는 쿼리의 유니크한 키 를 기반으로 쿼리 캐싱을 관리합니다.

쿼리 키(Query Keys)는 문자열이 될 수도 있고 문자 배열이 될 수 도 있습니다.

• 문자열 : 가장 단순한 형태의 쿼리 키는 문자열 입니다. 쿼리 키로 문자열이 전달되면 문자열을 사용하여 내부적으로 배열로 변환합니다.

   useQuery('todos', ...) // queryKey === ['todos']

• 문자 배열 : 계층 구조의 데이터 / 파라미터가 있는 쿼리

  useQuery(['todo', 5], ...)
   // queryKey === ['todo', 5]
   
  useQuery(['todo', 5, { preview: true }], ...)
   // queryKey === ['todo', 5, { preview: true }]
   
  useQuery(['todos', { type: 'done' }], ...)
   // queryKey === ['todos', { type: 'done' }]