[React][비교] SWR vs React Query vs Recoil selector ?

고민의 시작점

 

북스테어즈(https://book-stairs.com/) 서비스 작업을 하다가

진짜 독서가들의 독서법 - 북스테어즈

여러 API에 대한 비동기 처리를 관리하는 라이브러리의 필요성을 느끼게 되었다

반복되는 API 요청으로 불필요한 통신이 지속되었기 때문이다

 

그래서 캐싱에 필요한 라이브러리를 찾아보니, 대표적으로 3가지가 있었다

 

• Recoil selector (https://recoiljs.org/ko/docs/api-reference/core/selector/)
• SWR (https://swr.vercel.app/ko)
• React Query (https://react-query.tanstack.com/)

 

 적합성 / 대중성 / 성능 / 사용법 / 확장성

등 여러 방면에서 생각해야 했기 때문에 쉽사리 결정하지 못했다

 

부지런히 살펴보자

 

---

이걸 쓰는 게 맞아 ?

 

SWR 과 React Query 같은 경우에는 API 통신의 캐싱을 위해 많이 쓰는 듯 하였지만

Recoil selector 는 잘 보지 못하였기에, 찾아보니

전혀 사용하는 의미가 달랐다

 

Selector는 Recoil에서 함수나 파생된 상태를 나타낸다.
주어진 종속성 값 집합에 대해 항상 동일한 값을 반환하는 부작용이 없는 "순수함수"라고 생각하면 된다.

 

Recoil 에서 사용하는 atom 이나 selector 값들에 대해서 함수를 지정할 때 사용한다

거기서 파생되는 값들에 대해 캐싱 기능을 제공하지만,

캐싱 작용이 주가 아니기 때문에 그것에 대한 커스텀을 하기가 힘들다

또한, 나머지 두 라이브러리처럼 리패칭을 자동으로 시킬 수 없다

 

따라서 Recoil 의 selector 는 선택지에서 배제하도록 하자

 

---

커뮤니티는 어때 ?

 

[Fig 1] swr vs react-query

 

보는 것과 같이 React Query 가 SWR 에 비해 번들 사이즈는 3배 가량 크지만,

다운로드 수도 2배 정도 많다

관리 tool도 잘 되어있는 것으로 알고, 나온지도 오래 되어 안정성도 뛰어나다

 

여러 custom 활용도도 높아서 요즈음 많이 각광 받는 기술인 것 같다

실제로, Nomad Coder도 이로 수업했고, 우아한테크에서도 React Query 에 대한 세미나를 열기도 하였다 (들어볼 예정)

 

참고로, SWR 의 한글판 공식문서는 정말 최고이고, 사용법이 굉장히 간단하고 편리하다

 

---

직접 한 번 비교해보자

Recoil selector, SWR, React Query 에 대해서 비교 자료를 만들어보고자,

직접 mock 서버에서 불러오고, 리패칭 해보고, mutate 시켜보았다

 

json-server 로 JSON 파일을 만들어 진행하였고, 느린 3G 네트워크 상태로 실험하였다

 

swr_react-query

 

이로 알 수 있는 점은 다음과 같다

 

1. 캐싱이 이루어지기 전, fetch가 빨리 이루어지는 순
   1. recoil > swr > react-query
   2. 이를 통해 SWR 이 확실히 fetch에 (매우) 특화된 라이브러리임을 알 수 있다!
2. 서버의 데이터가 바뀌었을 때, refetch, 업데이트가 빨리 이루어지는 순
   1. react-query > swr
   2. Recoil selector 로는 리패칭을 알아서 처리해주지 않음
      (이전에 로그인 여부 API에 대해 selector를 쓰고자 했었는데, 포기하고 커스텀 훅을 사용했던 이유와 동일하다)
   3. 우측 네트워킹 칸을 보면 알 수 있듯이, React Query 의 리패칭 데이터 사이즈의 크기는 크지만, 속도는 더 빠른 것을 확인할 수 있다는 것-
3. 쓰다가 궁금해서 따로 해봤는데, react-query에서 mutate 같은 경우에는 invalidate 시키고 다시 fetch 시키는 형태라
   1. swr > react-query 순으로 데이터를 불러온다!

 

---

고민의 끝점

 

정리하자면,

selector 는 비교 대상에서 제외
swr은 fetch에 특화 & 사이즈 작은
react-query는 업데이트에 특화 & 커스텀 활용도가 높음

 

이다

 

결국 우리는 리패치를 시키며 변동성을 보이는 서비스가 아닌,

우리의 책정보를 불러와 보여주 것이 주인 서비스이기 때문에, 

최적의 번들 사이즈로 속도감 있는 사용성을 제공해줄 것 같은

SWR 을 선택하여 가져가기로 하였다

 

더불어, 다음은 React Query와 SWR의 개발적인 차이가 잘 정리된 아티클이다

https://tech.madup.com/react-query-vs-swr/

React Query vs SWR

 

고민의 발판을 마련해준 팀원들에게 감사하다

https://github.com/TeamBookTez/booktez-client

GitHub - TeamBookTez/booktez-client: 진짜 독서가들의 독서법, 클라이언트