React Query와 서버 상태 관리(비동기 통신 분리)

 

 

 

 

 

✅ 상태

주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음. 관리해야 하는 데이터들

UI/UX의 중요성과 함께 프로덕트 규모가 커지고, FE에서 수행하는 역할이 늘어남 → 관리하는 상태가 많아짐

 

 

✅ 서버에서 받아야하는 상태들의 특성

• Client에서 제어하거나 소유되지 않은 원격의 공간에서 관리되고 유지됨
• Fetching이나 Updating에 비동기 API가 필요함
• 다른 사람들과 공유되는 것으로 사용자가 모르는 사이에 변경될 수 있음
• 잠재적인 out of date가 될 가능성을 지님

 

Client에서 관리하는 일반적인 상태들의 특성과는 다르다.

서버 상태를 관리하기 적합한 라이브러리 → React Query

 

 

 

 

 

✅ 클라이언트/서버 상태 분리

React Query로 서버 상태를 관리하여도, 클라이언트 측에서 전역으로 관리해야 할 데이터는 존재한다.

이럴 때 추가로 Redux, Recoil 등을 사용하면 상태 관리 라이브러리가 본연의 역할만 집중하도록 할 수 있다.

 

 

 

 

 

✅ React Query 사용법 몇가지

 

index.js

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
		...
    </QueryClientProvider>
  )
}

 

 

 

 

 

Queries

• 데이터 Fetching용
• CRUD 중 Read에 사용
• 유용한 여러 인터페이스 제공

import { useQuery } from 'react-query'

function App() {
    const {
        data: 마지막으로 성공한 resolved된 데이터(Response)
        error : 에러가 발생했을 때 반환되는 객체
        isFetching : Request가 in-flight 중일 때 true
        status, isLoading, isSuccess, isLoading 등: 모두 현재 query의 상태
        refetch : 해당 query refetch하는 함수 제공
        remove : 해당 query cache에서 지우는 함수 제공
        
        ...etc
        
    } = useQuery(*Query Key, *Query Function, *Option)
}

*Query Key : String·Array 타입인 Query Key에 따라 query caching을 관리한다. 

*Query Function : Promise를 반환하는 함수

*Option ?

• onSuccess, onError, onSettled : query fetching 성공/실패/완료 시 실행할 Side Effect 정의
• enabled : 자동으로 query를 실행시킬지 말지 여부
• retry : query 동작 실패 시, 자동으로 retry 할 지 결정하는 옵션
• select : 성공 시 가져온 data를 가공해서 전달
• keepPreviousData : 새롭게 fetching 시 이전 데이터 유지 여부
• refetchInterval : 주기적으로 refetch 할 지 결정하는 옵션
• etc

 

 

 

 

Mutations

• 데이터 생성 / 수정 / 삭제용

const {
    mutate : mutation을 실행하는 함수
    mutateAsync : mutate와 비슷하지만 Promise를 반환
    reset : mutation 내부 상태 clean

    ...etc

    } = useMutation(*mutationFn, *Option)
    })

*mutationFn?

• Promise 반환 함수

*Option ?

• onMutate : 본격적인 Mutation 동작 전에 먼저 동작하는 함수, Optimistic update(서버 업데이트 시 UI에서도 어차피 할 것이란 가정으로 미리 UI를 업데이트 시켜줌) 적용 시 유용
• ... etc

 

 

 

 

Query Invalidation

• query Client를 통해 invalidate 메서드를 호출

// Invalidate every query in the cache
queryClient.invalidateQueries()

// Invalidate every query with a key that starts with 'todos'
queryClient.invalidateQueries('todos')

• 해당 Key를 가진 query는 stale 취급 되고, 현재 렌더링 되고 있는 query들은 백그라운드에서 refetch 된다.

 

 

 

 

 

참고 : [LIVE] React Query와 상태관리 :: 2월 우아한테크세미나