프론트엔드 상태관리 라이브러리 뭐하지?

정민·2022년 12월 9일
0

로컬 상태 관리 라이브러리

진짜 클라이언트 상에서 생기는 변수들을 관리하는 것이 이들인 것 같다.

예를 들어보자면 Recoil / Redux / Zustand 등등등?

( + RecoilSelector 에 관해… )

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

파생되는 값들에 대해 캐싱 기능을 제공하지만, 캐싱 작용이 주가 아니기 때문에 그것에 대한 커스텀을 하기 힘들다. 또한 리패칭을 자동으로 시킬 수 없다.

비동기 상태 관리 라이브러리

api 콜과 관련된 비동기 상태를 관리할 때 이를 쓴다.

SWR / react-query / apollo 등이 있다.

이를 사용하더라도, 프로젝트 내부의 로컬 상태를 관리하기 위해서는 추가적인 상태관리 라이브러리를 사용하는 경우가 많다고 한다.

우리 프로젝트 특성

소셜 미디어 서비스, 컴포넌트 뎁스가 높기 보다는 전환이 많다.

⇒ state/props로 충분히 관리 가능하다

페이지간의 전달해야하는 데이터가 없…는것…같다? (userid는 쿠키로 전달할 생각이니까)

⇒ 로컬 상태 관리 라이브러리를 굳이 쓰지 않아도 좋을 것 같다. (이건 나중에 달라질 수 있음)

CRUD가 번번히 일어나고, 사용자에 따른 분기처리가 많이 일어나기 때문에 계속 서버와 통신해서 해당 유저의 따른 데이터를 받아오는 비동기 데이터 형태가 많다.

⇒ fetching library를 쓰는 것이 좋을 것 같다 (SWR, react-query…)

SWR, React Query 둘 중에 선택하자!!

React Query vs SWR

React Query

React Query는 리액트 애플리케이션에 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 해 준다.

SWR

SWR은 먼저 캐시에서 데이터를 반환한 다음, 서버에 데이터를 가져오는 요청을 보내고, 마지막으로 최신 데이터를 제공하는 전략이다.

소개글에서 느껴지는 둘 사이의 뚜렷한 차이는 없다…

번들 사이즈

  • React Query 13.0kb
  • SWR 4.2kb

SWR 승

다운로드 수

  • React Query
  • SWR

React Query

처음 fetch 속도

  • React Query
  • SWR

SWR

refetch 속도

  • React Query
  • SWR

React Query

React Query

실시간 데이터 변동이 중요해서 refetch가 자주 이루어져야하는 서비스, 그리고 커스텀을 많이 해야하는 서비스

SWR

가벼워야하고, 간단한 서비스여서 쉽게 적용할 수 있어야 하는 서비스

결론

우리의 서비스는 굳이 실시간으로 데이터가 변동될 필요가 없다. 그렇기 때문에 SWR을 사용하는게 좋겠다!

참고

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

https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/

https://goongoguma.github.io/2021/11/04/React-Query-vs-SWR/

https://snupi.tistory.com/194

profile
괴발개발~

0개의 댓글