Redux vs Recoil

• 작성자: J201_최명성

---

상태관리 라이브러리인 Redux와 Recoil을 비교하고 결론적으로 Redux가 아닌 Recoil을 고른 이유에 대한 글.

Redux

장점

많은 상태를 다루기 좋다.

상태값이 많아질 경우 디버깅이 상대적으로 Recoil에 비해 더 편해질 것으로 예상된다.

Redux Devtool

Redux Devtools를 이용해 직관적으로 볼 수 있는 방법 또한 제공한다.

단점

유지 보수가 번거롭다.

작은 상태 하나를 변경하려면 actions, reducer, type 등 보일러 플레이트 코드를 많이 작성해야 하는 번거로움이 있다.

비동기 처리도 번거롭다.

내장 기능이 아닌 미들웨어를 통해서 비동기 처리 해줘야 한다.

redux-thunk 혹은 redux-saga, redux-toolkit등을 이용

Recoil

장점

직관적이면서 간단한 구조

React에서 사용하는 Hook과 유사한 방식으로 사용해서 구조가 간단하여 코드 양이 줄어든다. 그리고 단순히 RecoilRoot로 감싸고 atom단위로 선언하여 사용하기 때문에 러닝커브가 낮다.

const myRecoilState = atom({
	key: "",
	default: "",
})

const [state, setState] = useReocilState(myRecoilState)

쉬운 비동기 처리

Selector라는 내장된 기능을 사용하여 비동기 처리를 할 수 있다.

// https://recoiljs.org/docs/guides/asynchronous-data-queries
const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

단점

개발자 도구가 완벽하지 않다.

디버깅 및 스냅샷 테스트를 하는데 있어 신뢰성이 부족하다.

Recoilize라는 Devtool이 있는데 작은 버그들이 있다고 합니다.

모든 API들이 높은 신뢰성을 보장하지 않는다.

useGetRecoilValue, useRecoilRefresher 등은 공식문서도 UNSTABLE로 분류.

결론

프로젝트 크기를 고려했을 때 그렇게 많은 전역 상태를 관리하지 않을 것 같았다. Recoil이 디버깅이 불편하긴 하지만 그렇게 큰 프로젝트가 아니라고 생각하기 때문에 디버깅 보다는 짧은 프로젝트 기간 동안 유지 보수와 러닝커브를 고려 했을 때 Redux는 너무 무겁다는 생각이 들었기 때문에 Recoil을 기술스택으로 추천했다.

참조

Redux 시작하기 | Redux

Recoil 에서 Selector 기능 get, set 사용법

Installation | Recoil