데이터 패칭이란?
웹 에플리케이션에서 서버로부터 데이터를 가져오는 기능을 뜻한다. 이러한 작업을 단순화하고 관리를 유용하게 하기 위해 사용하는 것이 데이터 패칭 라이브러리 이다.
주로 웹 API를 통해 데이터를 요청하고, 응답을 받아와서 애플리케이션의 상태를 업데이트하는 작업을 처리한다.
또한 데이터 패칭 라이브러리는 HTTP 요청, 상태 관리, 오류 처리 등 다양한 기능을 제공하여 데이터를 효율적으로 관리하고 렌더링을 업데이트 하는 데 도움을 준다.
상태관리 라이브러리와의 차이점은, 상태 관리 라이브러리는 client 측의 상태를 관리하고, 데이터 패칭 라이브러리는 server 측의 데이터 정보를 관리한다는 점이 있다.
배경
이러한 데이터 패칭 라이브러리의 등장 배경은 다음과 같다.
- 성능과 효율성의 필요성 증가
웹 애플리케이션에서 데이터를 가져오는 것은 네트워크 비용과 시간이 소모되는 작업이다.
이러한 데이터 요청과 응답 처리를 최적화하여 애플리케이션의 성능을 향상시키는 것이 대두되었다.
- 최적화된 데이터 요청 필요
웹 애플리케이션에서는 종종 동일한 데이터를 여러 번 요청하는 상황이 발생한다.
예를 들어, 여러 컴포넌트에서 동일한 데이터를 사용하거나, 같은 요청을 반복적으로 수행하는 경우 등이 있다. 이러한 중복 요청을 방지하고, 이미 캐시된 데이터를 사용하여 성능을 최적화하는 것이 필요하였다.
데이터 패칭 라이브러리를 react와 함께 사용하면 어떤 장점이 있을까?
-
간편한 비동기 데이터 요청
데이터 패칭 라이브러리는 비동기 요청을 단순화 하여 HTTP 요청을 보내고 응답을 처리하는 것을 용이하게 만든다
-
상태 관리 및 업데이트 용이
리엑트와 데이터 패칭 라이브러리를 함께 사용하면, 서버에서 가져온 데이터를 리엑트 상태로 쉽게 관리하고 화면을 업데이트 할 수 있다
-
캐싱과 최적화
일부 라이브러리는 데이터를 캐싱하여 중복 요청을 줄이고, 새로운 데이터를 가져올 때 최적화된 요청을 수행한다. -
로딩, 오류 처리
네트워크 오류와 로딩 등을 적절히 처리하여 개발자에게 유용하고 편리한 개발 환경을 제공한다. -
서버사이드 렌더링과 호환
일부 라이브러리는 서버사이드랜더링(SSR)과 잘 호환되어 초기 렌더링 성능을 개선하는데 도움을 준다.
이를 리엑트와 함께 사용하면 데이터 관리와 렌더링 성능을 향상시키는 데 도움이 되므로, 프로젝트에서 적절히 활용하는 것이 좋다.react와 함께 사용 가능한 데이터 패칭 라이브러리는 axios, swr, tanstack query(전 react-query), Redux Toolkit Query, Apollo Client가 있다. 주로 인기있는 라이브러리는 tanstack query와 swr이다.
Axios
참고로, axios는 데이터 패칭 라이브러리로 분류되긴 하지만, 다른 라이브러리들과 목적과 방식이 살짝 다르다.
axios는 주로 HTTP 클라이언트로서의 역할을 하고, 다른 라이브러리 들은 데이터 패칭과 상태 관리를 종합적으로 제공하는데에 특화되어 있다.
그러므로 데이터 패칭 라이브러리를 사용할 때, axios를 통해 API를 호출하고 응답 받은 값을 react-query나 swr을 활용해 데이터를 관리하면 가장 이상적인 사용 방법이라 할 수 있다. 필자도 현재 react 프로젝트를 이런 방법으로 제작하고 있다. 본 블로그에서는 SWR과 Tanstack Query을 중점적으로 다룬다.
