Recoil vs Redux

Recoil vs Redux

React는 보통 State 관리 도구로 Redux, MobX 등의 라이브러리를 사용했다. 근데 이번에 NextJs로 프로젝트를 시작하면서 상태관리를 어떤 라이브러리를 사용할까 하다가 페이스북에서 React.Js 전용 상태관리 라이브러리로 출시한 Recoil 선택하게 되었다! 그래서 이번엔 Redux와 Recoil을 비교해가며 왜 Recoil을 선택 했는지 알아보자

Redux

Redux 설명 사진

Flux

Redux는 Flux 디자인 패턴을 기반으로 제작되어있다. 위와 같이 Dispatcher, Action, Store, View로 이루어져 있으며, 단방향 데이트 흐름을 가지고 있다. 모든 데이터는 디스패처를 통해 중앙 허브로 흐르며, View에서 상호작용이 일어나면 Action을 Dispatch을 통해 스토어로 전달하여 데이터를 변경하고, 상위 구성요소 트리에서 자신과 모든 하위 항목을 다시 렌더링하는 흐름이다.

그렇다고 Redux == Flux는 아니다 가장 큰 차이점은 Flux는 여러 개의 Store를 가지고 있지만, Redux는 단일 스토어만을 가지고 있다. 그리고 Redux는 Reducer라는 순수 함수를 여러개 두어 state를 변경한다.

Recoil

먼저 Recoil을 처음 접하고 생각 든 것은 굉장히 코드가 간결하고 간단하다였다. Redux는 처음 싲가하려면 많은 보일러 플레이트과 코드를 작성해야하고, 비동기 데이터 처리나 캐시와 같은 기능은 redux-saga 따위를 사용하는 불편함이 있었다.

Recoil은 이미 React에서 제공하는 Hook과 항상 유사한 형태이다. 그래서 많은 코드 양을 만들지 않고 사용할 수 있고, selector문을 통해서 비동기 데이터 흐름을 위한 솔루션도 제공한다.

Atom

Recoil의 가장 기본 단위이다. 컴포넌트에서 Import하여 사용할 State라고 생각하면 될 것 같다.

atom 값을 변경하면 해당 값을 구독하고 있는 컴포넌트들이 모두 재렌더링 된다.

export const titleState = atom<strring>({
  key: "title_State",
  default: "제곧네",
});

useRecoilState, useRecoilValue, useSetRecoilState

• useRecoilState - atom 값을 굳고하여 업데이트할 수 있는 hook이며, useState와 동일하게 사용할 수 있다.
• useRecoilValue - atom 값만을 반환한다.
• useSetRecoilState - atom 값을 변경하는 setter 함수를 반환한다.

import { useRecoilState } from "recoil";
import { titleState } from "./atomfile"
const [title, setTitle] = useRecoilState<string>(titleState);
const title = useRecoilValue<string>(titleState);
const setTitle = useSetRecoilState<string>(titleState);

Selector

atom에 의존하는 동적인 데이터 만들 수 있게 해준다. get 함수를 통해 반환하며, set 함수 또한 사용할 수 있다. selector에 영향을 주는 atom들의 값을 변경할 수도 있다는 것이다!

const fontSizeState = atom<int>({
    key: "fontSizeState",
    default: 14,
})

const fontSizeLabelingState = selector({
  key: "fontSizeLabelingState",
  get: ({ get }) => {
    const fontsize = get(fontSizeState);
    return `${fontsize}px`;
  }, 
});

결론

1. Recoil이 Redux보다 사용하기 굉장히 간단하다.
2. 순수 함수를 사용해 비동기 테이터를 쿼리할 수 있다.
3. UseState와 동일하게 hook을 사용해 store를 컨트롤할 수 있다. Dispatcher 와 action 등의 코딩을 할 필요가 없기때문에 깔끔한 코드를 구성할 수 있다.
4. 보일러 플레이트가 없다.
5. Recoil은 아직 베터라 Redux는 확립되어 있기 때문에 안정성 면에선 Redux가 우위에 있다.

내가 생각했을 때 지금 Recoil을 사용하지 않을 이유는 없다고 생각한다. 하지만, 대규모 프로젝트에선 안정성이 중요하기 때문에 위험을 감수하며 사용할진 잘 모르겠다.