Redux vs Recoil - 어떤 걸 골라야 할까?

❓ 상태 관리 라이브러리를 선정해야 할 필요성이 생겼다

현재 나는 4인 1팀(기획, 디자인, FE, BE)으로 팀을 이뤄 해, 커리어(원티드 해커톤)에 참여중이다. 서비스를 개발하는 과정 중 이전 포스팅의 스타일 도구에 이어 상태 관리 라이브러리를 선정해야 할 필요성이 생겼다.

FE 개발자가 나 혼자고, 개발 기한이 그리 길지 않아서(약 3주) 사용해보지 않았던 상태관리 라이브러리를 새로 공부해서 사용하기에는 기능, UI 구현에 시간적 부담이 클 거라고 예상해 이미 사용해 봤던 Redux와 Recoil을 후보로 두고 상태관리 라이브러리를 선정했다.

💡 그렇다면 Redux와 Recoil 중 내가 개발할 서비스에는 어떤 라이브러리가 더 적절할까?

먼저 둘의 장, 단점을 살펴보고, 추가적으로 제공되는 기능을 알아보자.

Recoil

장점: 가장 강점은 React의 useState 훅과 비슷하게 동작하는, 직관적이면서 간단한 구조를 가지고 있다. 이에 따라 코드의 양은 매우 줄어들게 된다.

단점: 그러나 Redux처럼 따로 안정적인 Devtool이 아직 없다. snapshot이라는 개념이 존재하지만, 직관적으로 볼 수 있는 것은 아니고 콘솔을 이용하는 형태로 볼 수 있다.

Recoilize라는 Devtool이 있는데 작은 버그들이 있다고 합니다. (실제 recoil을 이용해 개발하시는 분들은 console을 더 선호하신다고도 들었다..!)

결론: 디버깅의 측면에서 봤을 때 리덕스가 더 유리하다.

Redux

현재 리액트를 사용하는 사람들에게 가장 익숙한 상태관리 라이브러리라고 생각한다. 나 또한 Redux가 가장 익숙하고, 많이 사용해봤다.

장점: Redux는 이미 검증된 신뢰성 있는 라이브러리이다. 상태값의 변경 사항을 Redux Devtools를 이용해 직관적으로 볼 수 있는 방법 또한 제공한다. 이로 인해 전역으로 관리해야 하는 상태값이 많아질 경우 디버깅이 상대적으로 Recoil에 비해 더 편해질 것으로 예상된다.

단점: 그렇지만 작은 상태 하나를 변경하려고 해도, actions, reducer, type 등 보일러 플레이트 코드를 많이 작성해야 하는 번거로움이 있다.

결론: Recoil에 비해 상대적으로 코드를 작성하는 양이 많아집니다.

비동기 처리 관련(or 부가 기능 관련)

Recoil

Selector 를 사용한다.Selctor 는 recoil에서 비동기 처리를 위해 사용하며, 기본적으로 값을 캐싱한다. 들어왔던 적이 있는 값을 기억하고 있기 때문에, 같은 응답을 보내는 api call에 대해서는 추가적으로 요청하지 않아 성능적으로 유리하다.

또한 이는 내장되어 있는 기능이기 때문에 redux처럼 따로 미들웨어를 설치해줄 필요는 없다.

Redux

비동기 처리에 관련한 부분은 redux-thunk 혹은 redux-saga, redux-toolkit 등을 이용한다. (비동기 처리 뿐만 아니라 다른 여러가지 기능을 포함해서) 이들 또한 검증된 미들웨어이기 때문에 신뢰성이 높다.

그러나 예를 들어 redux-saga를 사용하게 된다면 제너레이터와 이펙트(redux-saga) 등에 대한 이해가 필요하게 된다.(러닝 커브 상승) 또한 결국 이를 사용하기 위해서는 미들웨어를 추가적으로 설치해줘야 한다.

결국 비동기 처리에 대한 단점은 두 상태관리 라이브러리 모두 러닝커브가 생긴다는 점이라고 볼 수 있다.

결론 (Recoil 채택)

대규모 상태를 관리해야 하는 프로젝트에는 redux를 사용하는 것이 좀 더 적합할 것이라고 생각했다. 또한 이런 대규모 상태를 감시, 디버깅하기 위한 안정적인 devtool도 가지고 있기 때문에 안정성 면에서는 redux가 더 낫다고 생각하였다.

그러나 지금 개발하는 프로젝트는 오픈 API를 사용해서 대규모 데이터를 다루는 것도 아니고, 기한이 길지 않은 해커톤인 만큼, 상대적으로 적은 코드를 작성하는 recoil이 redux에 비해 유리하다고 생각하였다.

✅ 결론적으로, 더 직관적이고 간단한 구조를 가진 recoil을 현재 프로젝트의 상태관리 라이브러리로 확정하였다!

참조링크

Recoil 시작하기 | Recoil

리덕스 잘 쓰고 계시나요? - 리디주식회사 RIDI Corporation

2021년 React 상태 관리 라이브러리 전쟁 : Hooks, Redux, Recoil

NAVER D2