react-query 이전
대개 react query를 도입하기 전에는 서버와의 API통신과 비동기 데이터 관리에 redux를 사용했습니다.
비동기 미들웨어인 redux-thunk, redux-saga를 사용하기도 하며 다양한 Custom미들웨어를 만들어 사용하기도 했습니다.
하지만 redux는 비동기 데이터를 관리하기 위한 전문 라이브러리가 아니라, 범용적으로 사용할 수 있는 전역 상태 관리 라이브러리이기에 redux 미들웨어로 비동기 상태를 불러오고 그 값을 보관할 수는 있지만, 내부적인 구현은 모두 개발자가 알아서 해야하기에 팀 구성원들이 많아지고 협업 관계가 복잡하게 구성될 수록 데이터를 관리하는 방식과 방법이 모두 달라지는 점이 발생합니다.
react-query 도입
redux를 사용한 API요청과 비동기 데이터 관리의 불편함을 해소하기 위해 react-query를 사용할 수 있습니다.
react-query는 react application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. react-query는 우리에게 친숙한 Hook을 사용하여 react component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 source)의 데이터를 사용할 수 있는 방법을 가지고 있습니다.
react-query는 API요청을 Query 와 Mutation 이라는 두 가지 유형으로 나누어 생각한다.
query 요청
// 가장 기본적인 형태의 React Query useQuery Hook 사용 예시
const { data } = useQuery(
queryKey, // 이 Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (required)
fetchFn, // 이 Query 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
options, // useQuery에서 사용되는 Option 객체 (optional)
);react-query의 useQuery Hook은 요청마다(API마다) 구분되는 Unique Key를 필요로 한다. react-query는 이 Unique key로 서버 상태를 로컬에 캐시하고 관리한다.
mutation 요청
// 가장 기본적인 형태의 React Query useMutation Hook 사용 예시
const { mutate } = useMutation(
mutationFn, // 이 Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
options, // useMutation에서 사용되는 Option 객체 (optional)
);useMutation Hook으로 수행되는 Mutation 요청은 http method POST,PUT,DELETE 요청과 같이 서버에 Side Effect를 발생시켜 서버의 상태를 변경시킬 때 사용한다.
useMutation Hook의 첫번째 파라미터는 이 Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수 이며, useMutation의 return 값 중 mutate함수를 호출하여 서버에 side effect를 발생시킬 수 있다.
참고
