React-Query

React-Query 사용이유 ?

winhwi 2023. 11. 15. 17:03

React -Query는 React 애플리케이션에서 데이터를 효과적으로 관리하기 위한 라이브러리입니다.
주로 서버에서 비동기 데이터를 가져오고 관리하는 데 사용됩니다.

SWR , Apollo , Redux 와 같은 라이브러리도 이와 유사한 목적으로 사용됩니다.

 

이중에 React-Query의 장점은

  • 쉽게 사용 가능한 문서와 다양한 예제가 많아 쉽게 익힐 수 있습니다.
  • 쿼리와 뮤테이션은 비슷한 구조를 공유하여 코드 일관성을 제공하며,
    이는 개발자가 쉽게 이해하고 유지보수 할 수 있도록 도와줍니다.
  • 데이터를 캐싱하고 관리하며, 데이터가 변경될 때 자동으로 리렌더링 등 다양한 기능을 제공합니다.
  • 데이터를 주기적으로 업데이트해야 하는 상황에서 유용한 인터벌 쿼리 기능을 제공합니다.
  • React Hooks를 기반으로 하여 React 애플리케이션에서 자연스럽게 사용할 수 있습니다.


비교


 

비교적 짧은 시간의 리서치를 통해 얻은 내용이므로 완벽하지 않을 수 있습니다.

 

SWR

- fetch속도가 React-Query보다 빠르지만 세부적인 캐싱 제어가 제한적이다.

- 대규모 및 복잡한 애플리케이션에서 더 세밀한 제어가 필요한 경우에는 적합하지 않을 수 있다.

고급 기능을 사용하지 않는 단순한 애플리케이션에서는 작은 번들 크기와 빠른 fetch속도의 장점을 가진

SWR이 좋다고 생각됩니다.

 

Apollo

- GraphQL 에 대한 많은 기능을 지원합니다.

- 그로인해 번들 크기가 커질 수 있고, GraphQL에 익숙하지 않은 개발자에게는 초기에 어려울 수 있습니다.

GraphQl 을 사용해야한다면 Apollo를 적용해 볼 만 하지만,

그렇지 않다면 사용해야할 이유를 잘 모르겠습니다.

 

Redux

- Redux Middleware를 사용하여 다양한 기능을 처리 할 수 있습니다. ex) 비동기처리

- 데이터가 단방향으로 흐름에 따라 버그를 예측하기 쉽습니다.

- 액션값 , 디스패치함수 등 복잡성이 있습니다.

=> 하나의 api요청을 위한 코드 분량이 많아보이며.

가독성이 떨어지고 유지보수가 힘들어 질꺼같다.

 


 

다음 프로젝트는 소규모의 개인프로젝트라 SWR이 적합하다고 판단되지만,

더 많은 기능을 사용해볼 수 있는 React-Query를 선택하게 되었습니다.