React 상태 관리 라이브러리들

리액트 state, props로만 상태 관리?

리액트가 데이터 흐름이 부모->자식의 단방향적인 특징을 가지기 때문에 자식에서 부모의 상태를 바꾸려면 props를 넘겨줘야 함. 이게 반복되다 보면 props drilling이 심해지고 props depth가 증가해서 불필요한 리렌더링이 일어나는 등 비효율적
->상태 관리 라이브러리도 사용할 필요가 있음

여러 상태 관리 라이브러리

Redux

최초 라이브러리, 복잡하고 장황한 코드 필요
action, reducer, selector, store를 세팅하는 보일러플레이트 코드로 구성
오직 하나의 store만 가지며 하나의 객체 트리를 가져서 디버깅이 용이
store 내부 상태는 action이라는 객체에 의해서만 변경할 수 있다.

context api

provider로 감싸진 부분의 업데이트가 되지 않은 state에도 리렌더링이 일어남
->정적인 데이터 위주로 처리하거나 업데이트가 빈번하지 않을 때 적합
->불필요한 리렌더링을 보완하기 위해 recoil이 나옴

MobX

사용률이 리덕스보다 떨어짐
리덕스보다 다루기 쉬우나 store가 여러개가 될 수 있어 상태 변경시 여러 store가 영향을 받을 수 있다는 위험성이 존재

SWR

stale-while-revalidate, 데이터를 검증하는 동안 stale(cache) 데이터를 사용하는 것
cache된 데이터를 보여주고 데이터 요청을 보낸 후 새롭게 받은 데이터를 보여주는 것을 의미함
useSWR을 import해서 사용

Recoil

atom과 selector로 이루어져 있음
context api와 다르게 업데이트된 state 부분만 리렌더링

• Rest API를 사용할 경우 → react-query: api로부터 데이터 불러오기,저장 자동화 + Recoil(미니 리덕스)
• GraphQL api를 사용할 경우 → apollo-client+recoil 라이브러리 이용