상태관리 라이브러리(redux,mobx,recoil)

mobx < recoil(react hook) < redux

recoil ⇒ 외국문서 보면서 할꺼면 가장 지향 /

redux ⇒ 언젠가는 공부해야하는 기술! 기술문서나 예제코드가 많다. / 러닝커브

mobx ⇒ 쉽고, 작은 프로젝트에 용이

Redux

Flux개념을 바탕으로 한 React에서 현재 가장 많이 사용되는 State 관리 라이브러리

장점

높은 러닝 커브를 극복하면, 높은 확장성과 순수한 특성으로 인해 예측 가능하고 테스트하기가 더 쉽다.
Redux Dev Tools라는 멋진 디버깅 도구로 높은 수준의 디버깅이 지원된다.
큰 커뮤니티와 이미 수많은 예제, 문서, 경험 등이 존재한다.
ImmutableJS 같은 라이브러리를 통해 불변성을 높게 유지할 수 있다

단점

가파른 학습 곡선
동시 모드 지원 부족
비 반응적 접근 방식
코드 분할을 달성하기 어려움
기본 제공 비동기 지원 없음

Mobx

객체지향 느낌이 강하며, Component와 State를 연결하는 번잡한 보일러플레이트 코드들을 데코레이터(애노테이션) 제공으로 깔끔하게 해결합니다.

Mobx 사용이 용이한 경우

한 스토어에 저장되는 데이터가 명확하고, 드물게 다른 스토어에 있는 데이터에 접근하는 경우
작은 프로젝트
복잡한 상태 관리가 요구되지 않는 경우

Observable

Mobx에서 Rerendering 대상이 되는 State를 관찰 대상(observable value)라고 칭하며 @observable 데코레이터로 지정한 State는 관찰 대상으로 지정되고 그 State는 값이 변경 떄 마다 Rerendering됨

Mobx가 동작하는 가장 기본 개념

Recoil

2020/5월기준 실험단계, 페이스북에서 McCabe와 그의 동료들이 만든 라이브러리

Facebook은 최근 에 기존 Context API를 사용할 때 더 큰 애플리케이션이 직면하는 많은 문제를 해결하는 새로운 실험적 JavaScript 상태 관리 라이브러리 인 Recoil을 출시

기존의 Redux,Mobx와 같은 상태관리 라이브러리들은 React의 라이브러리가 아니여서 store는 "외부요인" 으로 취급되는것이기 때문에 React의 내부 스케줄러에 접근할 수 없다.

위와 같은 내용은 아직까지는 중요하지 않지만 동시성 모드가 등장하며 이야기가 달라졌다. Recoil은 내부적으로 React의 상태를 사용하고 있으며, 동시성 모드에 대한 지원도 곧 추가될 것

React가 가진 상태 공유 솔루션인 Context API의 경우 반복적이고 복잡한 업데이트에 사용할 경우 비효율 적이다.

개인적으로 새로운 Context는 locale/theme와 같은 낮은 빈도의 업데이트에 사용 가능하다고 생각한다. 또한 이전에 Context를 사용했던 방법으로 사용해도 좋다.(즉 정적인 값, 구독을 통해 업데이트를 전파하는 것) **하지만 Context는 Flux와 같은 상태 관리 시스템을 대체할 수 없다. - 페이스북 엔지니어 Sebastian Markbage -

Recoil의 장점

학습이 쉽다. APi가 단순하고, 이미 hook을 사용하고 있는 사람들에게는 익숙하다, React처럼 행동하는 상태 관리 라이브러리
컴포넌트가 사용하는 데이터 조각만 사용할 수 있고, 계산된 selector를 선언할 수 있으며, 비동기 데이터 흐름을 위한 내장 솔루션까지 제공한다.
비동기 데이터, 상태 지속성, 매개변수화된 selector를 처리할 수 있는 솔루션이 제공된다.
새로운 구문을 배우거나 ㅅ많은 보일러 플레이트 코드를 설정할 필요가 없다.

Recoil의 기본

Atom은 하나의 상태라고 볼 수 있다. 컴포넌트가 구독할 수 있는 React state라고 생각하면 됨
Atom의 값을 변경하면 그것을 구독하고 있는 컴포넌트들이 모두 다시 렌더링됨
```
export const nameState = atom({
  key: 'nameState',
  default: 'Jane Doe'
});
```

useRecoilState — atom의 값을 구독하여 업데이트할 수 있는 hook. useState와 동일한 방식으로 사용할 수 있다.

useRecoilValue — setter 함수 없이 atom의 값을 반환만 한다.

useSetRecoilState — setter 함수만 반환한다

import {nameState} from './someplace'
// useRecoilState
const NameInput = () => {
  const [name, setName] = useRecoilState(nameState);
  const onChange = (event) => {
   setName(event.target.value);
  };
  return <>
   <input type="text" value={name} onChange={onChange} />
   <div>Name: {name}</div>
  </>;
}
// useRecoilValue
const SomeOtherComponentWithName = () => {
  const name = useRecoilValue(nameState);
  return <div>{name}</div>;
}
// useSetRecoilState  
const SomeOtherComponentThatSetsName = () => {
  const setName = useSetRecoilState(nameState);
  return <button onClick={() => setName('Jon Doe')}>Set Name</button>;
}