생각해보니 첨으로 사용해본 React Query를 지난 팀플젝때 너무나 편리하게 잘 썼는데, 정작 글로 정리한 적이 없는 것 같아서... 이번 TypeScript 과제 주간을 맞아 React Query에 대해서 한 번 정리해보려고 한다.
👍🏻React Query
리액트에서 데이터를 쉽게 관리할 수 있도록 해주는 강력한 라이브러리이다. 서버에서 데이터를 가져오거나 업데이트 할 때 사용되며, 캐싱, 리트라이, 뮤테이션, 인터벌 리프레시 등 다양한 기능을 통해 데이터 관리를 용이하게 할 수 있다.
- React Query를 사용하기 전에는
Redux나useContext등과 같은 전역 상태 관리 도구를 사용하여 서버로부터 받아온 데이터를 전역 상태로 관리하며 필요한 컴포넌트에서 데이터를 다뤘고, 상태 변화에 따른 UI 업데이트를 할 수 있었다. 이 방법들로도 데이터를 관리할 수는 있지만, 비동기 작업을 처리하기 위해 추가적인 로직이 필요했다.
React Query는 이전의 전역 상태 관리 도구를 사용할 때보다 비동기 통신을 통한 데이터 가져오기, 캐싱, 자동 업데이트, 오류 처리 등을 더욱 간편하게 할 수 있어 불필요한 코드의 양을 줄일 수 있다.
✨React Query의 장점
1. 간편한 데이터 관리: 데이터 가져오기, 캐싱, 갱신 등을 복잡한 상태 관리 로직을 작성할 필요 없이 단순하게 처리할 수 있다.
2. 캐싱 및 자동 업데이트: 내장된 캐시 시스템을 통해 데이터를 캐시하고, 이 캐시된 데이터를 사용하여 성능을 향상시키며, 데이터를 자동으로 업데이트하여 사용자 경험을 개선시킨다.
3. 서버 상태 동기화: 서버 상태를 자동으로 동기화하여 변경된 데이터를 클라이언트에 반영할 수 있다. Redux나 useContext를 사용할 때처럼 받아온 데이터를 전역 상태로 관리할 필요가 없다!
4. 간편한 로딩/오류 처리: API 요청 중 로딩 상태를 간단하게 처리할 수 있으며, 발생하는 오류를 쉽게 처리할 수 있다.
5. 효율적인 네트워크 요청 관리: 중복 요청을 줄이고 불필요한 데이터를 다시 가져오지 않는 등 효율적으로 네트워크 요청을 관리하여 트래픽을 최적화할 수 있다.
✏️React Query 사용 준비
- 리액트 프로젝트에 react-query 패키지를 설치한다.
npm install react-query
yarn add react-query
- 프로젝트를 아우르는 최상위 컴포넌트에서 queryClientProvider 설정을 해준다.
나의 경우에는 App.jsx에서 그림에서처럼 QueryClientProvider 코드를 작성해주었다. 이렇게 하면 React Query를 사용할 준비는 끝났다!
❤️axios로 Json-server에서 데이터 불러오기
- 리액트 프로젝트에 axios 패키지를 설치한다.
npm install axios
yarn add axios
- axios를 통해 데이터를 가져오는 로직은 axios 폴더에 모아두기로 한다.
json-server 엔드포인트에서 todos 데이터를 가져오는 async 함수를 만들어 export하면 데이터가 필요한 컴포넌트에서 import해서 여기 작성해 둔 로직대로 데이터를 가져올 수 있다.
나의 경우 서버 주소를 환경 변수로 설정해 두고process.env이하에 붙여 사용하고 있는 모습이다.
데이터를 갖고 올 때까지 기다렸다가, 가져오기에 성공하면 response를 return하고, 가져오기에 실패하면 에러 메시지를 콘솔에 띄우는 식이다.
- 데이터가 필요한 컴포넌트에서 useQuery해준다.
const {isLoading, isError, data} = useQuery("쿼리키", 데이터 가져오는 함수)
요렇게 작성해주면, 데이터 로딩 중일 때 그리고 데이터를 로드하지 못했을 때에 대한 처리를 쉽게 할 수 있다.
데이터 가져오는 함수에서 return response; 해줬기 때문에 컴포넌트에서는 data에 response 내용이 들어 있을 것이다.
json-server로부터 axios로 가져온 데이터를 컴포넌트에서 제대로 전달받아 출력하고 있는 모습이다. 이제 이 데이터를 사용해서 예쁜 UI에 적용해주면 된다.
