서론
지금까지 웹 개발을 하면서 React Query를 사용한 적이 없었고, 사용해야 할 필요성도 느끼지 못했었다.
하지만 동아리 프로젝트에서 사용하는 기술스택중에 React Query가 있어서 React Query 내용을 학습하면서 사용해야할 이유도 찾아보고자 한다.
React Query를 왜 쓸까?
React Query를 사용하기 이전에는 서버와 통신하기 위해 단순히 async/await로 비동기처리를 관리하고, fetch나 axios를 이용하여 API에 접근하였다.
React Query를 사용하면 어떤 장점이 있고 기능이 있는지 알아보자.
React Query
공식 홈페이지에서는 React Query를 다음과 같이 소개한다.
웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만든다.
React Query를 사용하지 않는다면?
React Query를 사용하지 않고 서버 상태를 파악하면서 진행하면 다음과 같은 내용을 직접 다루어줘야 한다.
캐싱
여러번의 동일한 데이터 요청의 중복 제거
백그라운드에서 오래된 데이터 업데이트
데이터가 오래된 시기
데이터 업데이트 반영
성능 최적화
메모리 및 가비지 관리
React Query를 사용한다면 훨씬 간단하게 위 내용들을 관리할 수 있다.
서버 상태 관리 필요성?
기존 상태 관리 라이브러리는 클라이언트 상태 작업에는 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않다. 클라이언트 상태와 서버상태가 다르기 때문이다.
서버 상태를 적절하게 관리하지 못한다면 다음과 같은 문제가 발생할 수 있다.
현재 관리하고 있지 않은 상태를 지속해서 가지고있을 수 있다.
API fetch나 업데이트를 위해 비동기처리가 필요하다.
오래된 데이터(업데이트되었으나 반영되지 않은)를 사용할 수 있다.
React Query의 Custom Hooks
주로 사용하는 Hook으로는 useQuery와 useMutation이 있다.
이 Hook들은 중요한 관계로 추후 자세히 다뤄볼 예정이다.
이번에는 간단하게 다뤄보도록 하겠다.
useQuery
서버로부터 데이터를 읽어올 때 사용한다. 주로 HTTP 메서드의 GET방식에 사용한다.
const { data } = useQuery(
queryKey, // 이 Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (required)
fetchFn, // 이 Query 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
options, // useQuery에서 사용되는 Option 객체 (optional)
);useQuery Hook은 요청마다 Query Key를 필요로 한다. React Query는 Query Key로 서버 상태를 로컬에 캐시하고 관리한다.
useMutation
서버의 데이터를 생성, 업데이트, 삭제하는 작업에 사용한다. HTTP 메서드의 POST, PUT, DELETE 방식에 사용한다.
const { mutate } = useMutation(
mutationFn, // 이 Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
options, // useMutation에서 사용되는 Option 객체 (optional)
);useMutation의 mutate함수를 호출하여 서버에 Side Effect를 발생시킬 수 있다.
결론
React Query를 사용하면 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있게된다.
React Query는 서버 상태 작업에 적합하다.
React Component 내부에서 직관적으로 API를 사용할 수 있다.
React Query의 다양한 기능을 이용해서 핵심로직에 집중할 수 있다.
