React Query와 SWR에 대하여 알아보자!

React Query

기능과 목적

데이터를 가져오고 관리하는데에 사용된다. Rest API, GraphQL 등

 

기능

쿼리 : 데이터를 가져오기 위한 쿼리 함수 정의, 실행

뮤테이션 : 데이터를 변경하는 뮤테이션 처리

인피니트 스크롤링 및 페이지네이션 지원

자동 캐싱 및 데이터 유효성 검사를 통한 최적화

에러 처리 및 재시도 메커니즘 내장

 

 

SWR

기능과 목적

주요 데이터 가져오기와 캐싱에 중점을 둔다. Rest API, GraphQL 또 다른 http 요청

 

기능

데이터 가져오기 및 캐싱 : http 요청을 통해 가져오고 자동으로 캐싱

데이터 구식 여부 확인 : 자동으로 업데이트함

 

 

기존 API fetching과 차이점

자동 캐싱 및 데이터 관리

React Query / SWR : 내부적으로 데이터 캐싱 및 관리, 캐시된 데이터 반환, 네트워크 요청 최소화

기존 API 호출 : 데이터 캐싱 및 상태 관리를 수동으로 해야함, 중복된 요청 발생, 데이터 관리 어려움

 

자동 에러처리 및 재시도

React Query / SWR : 자동으로 에러 처리, 재시도 메커니즘 제공, 서버 에러 처리하기 쉬움

기존 API 호출 : 에러처리와 재시도를 수동으로 구현, 코드 복잡, 예외 처리 놓치기 쉬움

 

상태관리 및 리렌더링

React Query / SWR : React 훅을 제공, 자동으로 컴포넌트 리렌더링함, UI 업데이트 쉬움

기존 API 호출 : UI 수동으로 업데이트

 

 

React Query / SWR 작동원리

데이터 요청

React Query : 데이터 가져오기 위해 ‘useQuery’ 훅 사용

SWR : ‘useSWR’ 훅 사용, 데이터를 가져오기 위한 url 또는 키와 함께 사용됨

 

캐싱

React Query : 요청한 데이터는 내부적으로 캐싱됨, 캐시는 메모리에 저장되어 빠르게 접근 가능

SWR : url 키를 기반으로 캐싱됨

 

데이터 유효성 검사

React Query : 데이터가 캐시된 상태에서 유효성 검사함, 데이터가 구식인 경우에만 서버로 요청 보냄

SWR : 데이터가 캐시된 상태에서 요청한 url로부터 데이터를 가져옴

 

 

React Query / SWR 사용 중인 회사들

토스

데이터를 가져오기 위해 토스 커뮤니티가 자주 사용하고 있는 라이브러리임

컴포넌트 단위로 비동기 리소스를 선언적으로 사용할 수 있게 해 주는 것이 특징!!

 

매드업

회사의 프로덕트 중 하나인 ‘레버’에서는 상태 관리를 위해 SWR을 사용중임