Recoil 배경 및 기본 알아보기

 

왜 리코일이어야 하는가?

리액트 공식 상태관리 라이브러리 Recoil의 등장 배경에 대해 알아보자.

단방향 데이터 바인딩 VS 양방향 데이터 바인딩

 

단방향 데이터 바인딩은 이벤트 혹은 뷰 업데이트 코드를 통해서만 명시적 업데이트 가능

양방향 데이터 바인딩은 뷰가 데이터를 수정하고, 데이터가 뷰를 수정할 수 있음. (단뱡향 + 프레임워크의 변수 watcher)

Flux Architecture

페이스북의 flux 아키텍처는 전통 MVC, MVVM의 안티테제임.

MVC의 문제점은 기존과 다른 컴포넌트 중심 설계 사상에서,

view와 model의 양뱡향 연결 갯수가 너무많아 추적이 어려워진다는 것임

(이전에는 view가 하나의 페이지 였다면 - 이제는 컴포넌트 단위로 쪼개짐)

MVC 아키텍처

Flux 아키텍처는 단방향 데이터 흐름을 따른다

Action은 이벤트(DDD의 커맨드) 역할을 하며

Dispatcher는  Action을 확인해 데이터 저장소(Store)를 갱신한다.

그리고 변경된 데이터는 Store를 통해 View에 반영된다.

 

즉, Dispatch가 비즈니스 로직을 포함한다.

flux

Redux (reducer + flux)

왜 redux를 만들었는가?

Flux의 사상에는 단일 진실 공급원이 없다.

즉 Store들은 쪼개져 있다.

댄 아브라모프는 Flux 아키텍처를 사용하면 해당 Store를 조합해서 데이터를 만드는게 어려웠다고 한다.

또한 Dispatcher 내부의 로직 재사용이 쉽지 않았다고 한다.

그래서 Redux라는 개선된 아키텍처를 도입한다.

Flux vs Redux

아래 그림에 Dispatch가 있으나 실제로 Redux에 Dispatcher는 존재하지 않는다.

(리액트의 useDispatch는 store의 dispatch 함수를 리턴하여, 이를 통해 스토어에 액션 객체를 전달한다.)

리덕스 아키텍처

 

리덕스의 문제점

리덕스의 공동 창시자

단일 스토어. 단일 리듀서로 관심사의 분리가 쉽게 이루어지지 않음.

비동기 상태와 결합이 어려움. (미들웨어)

보일러 플레이트가 너무 많음

리코일의 새로운 사상

기존 리액트의 철학인 탑 다운에서 > 작은 상태들을 쌓아 바텀 업 스타일로 상태관리 철학을 변경

리코일 : 바닥부터 조합한다.

 

아톰을 조합해 더 큰 상태를 만든다.

비동기 상태도 조합이 가능함

리코일 기본

아래에 있는 내용들만 알면 실질적인 Context API의 사용을 대체할 수 있다.

(atom을 Selector에서 객체로 조합. getter와 settor 구현)

Atom — 하나의 상태다. useState처럼 사용할 수 있다. 

Selector - 여러 상태(Atom)를 조합한 새로운 상태다. 두 메서드를 사용할 수 있다.

• get : 각 상태 조합로직
• set :사용하는 상태 별로 각각 수정로직을 적용

// input text를 저장하는 atom
export const textState = atom({
  key: "textState", // unique ID (with respect to other atoms/selectors)
  default: "" // default value (aka initial value)
});

// textState atom을 사용하여 파생한 selector. 길이를 리턴한다.
export const charCountState = selector({
  key: "charCountState", // unique ID (with respect to other atoms/selectors)
  get: ({ get }) => {
    const text = get(textState);

    return text.length;
  }
});

// Selector 상태 변경 예제
const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) =>
    set(
      tempFahrenheit,
      newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32,
    ),
});

// setTempC(10);

 

https://medium.com/swlh/recoil-another-react-state-management-library-97fc979a8d2b

Recoil — Another React State Management Library?

https://velog.io/@juno7803/Recoil-Recoil-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

[Recoil] Recoil 200% 활용하기