server state
와 client state
의 두가지 개념으로 나누어 바라봅니다.server state
를 관리하는 것을 목적으로 합니다. 즉, client state
에서 캐시 데이터를 관리하는데 사용되는 보일러 플레이트 코드들을 몇 줄의 코드로 대체하여 global client state
에서 server state
를 들어내는 데 효과적입니다.state
와 context
를 사용하여 서버 상태를 관리합니다. 즉, server state
를 리액트다운 방식으로 처리하기 위한 라이브러리입니다.<aside> 📦 - 캐싱
</aside>
어떻게 이러한 기능들을 사용하는지 핵심 개념 위주로 살펴보겠습니다.
*QueryClient
는 쿼리와 쿼리 상태를 관리하는 메소드들을 포함한 객체입니다. 이를 context를 통해 앱의 상단에 위치시키면 사용 준비가 완료됩니다.*
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
*useQuery
를 통해 컴포넌트 어디에서든 쿼리를 정의할수 있습니다. 이렇게 정의된 쿼리는 병렬적으로 서버에 요청됩니다.*
*query keys
는 배열의 형태로 Promise 비동기 함수에 전달됩니다. 첫번째는 query string
으로 유니크한 문자열로 제공해야 하며 이는 쿼리 데이터를 판별하는데 사용됩니다. 뒤에 살펴보겠지만 메소드에 query string
을 제공하는 것만으로 많은 일들을 할 수 있습니다.*
배열의 형태로 제공되는 option은 옵션으로 제공이 가능하며 문자열, 객체 모두 가능합니다. 해당 인자를 받아 비동기 요청시 전달할 수 있습니다. (ex. api 요청 path 전달, ‘/user’)
여기서 todoList로 정의한 쿼리는 쿼리에 대한 모든 상태를 포함하는 객체입니다. isLoading, isError, data, error등이 있습니다.
*// 방법(1): useQuery(['query string', options], queryFn)*
const todoList = useQuery('todos', fetchTodoList)
const todoList = useQuery(['todos', options], fetchTodoList)
function fetchTodoList({ queryKey }){
const [_key, options ] = queryKey
return axios.post("url", {options})
}
*// 방법(2): 객체로 제공할 수도 있습니다.*
useQuery({
queryKey: ['todo', 7],
queryFn: fetchTodo,
...config,
})