[Recoil] 상태관리 라이브러리 Recoil 을 사용하면서 느낀 장단점

지금까지 토이프로젝트, 협업 프로젝트를 포함해서 3개의 프로젝트, 여러 취업용 코딩과제에서 리코일을 사용해 봤다. 그동안 느낀 장점과 단점, 또 추가적으로 지극히 개인적인 의견을 적어보고자한다.

 

Recoil?

리코일은 페이스북에서 만든 상태관리 라이브러리이고, 가장 최근 릴리즈된 버전은 0.7.6버전이다. 리코일에서 주요 개념은 Atom과 Selector가 있는데 Atom은 리코일에서 '가장 작은 상태의 단위'이고, Selector는 Atom을 기반으로 파생된 데이터를 관리하는 역할을 한다.

---

장점 

1. React 스럽게 동작한다.

import {useRecoilState} from 'recoil'

const [data,setData] = useRecoilState(Atom)

위 코드는 React를 다뤄본 사람이라면 쉽게 이해할 수 있을 것이고, 직관적으로 알아볼 수 있다. 리코일의 경우 실제로 위의 코드처럼 React Hooks와 같은 형태의 hooks 를 통해 제어하고, 덕분에 상대적으로 낮은 러닝커브를 가지고 있다고 할 수 있다.

import {useRecoilValue, useSetRecoilState} from 'recoil'

const data = useRecoilValue(Atom)
const setData = useSetRecoilState(Atom)

또한 의도하지 않은 상태의 변조를 막기 위해 useRecoilValue Hook을 이용해 Atom을 읽기전용으로 불러 올 수도있고, 반대의 경우인 Atom의 변경만을 필요로 할때는 useSetRecoilState Hook을 통해 Atom을 변경할 수 있다.

 

사실 이 부분이 리코일을 사용하게 된 가장 큰 계기이다. 리액트를 배우면서 리액트의 특징인 단방향으로 흐르는 상태데이터를 관리하기 위해 다양한 상태관리 툴들이 있다. 가장 대표격이자 근본인 Redux는 리액트와 생김새도 다르고, 사용하기 위해 세팅해줘야하는 보일러플레이트가 장황하다. Selector, Action, Store 등의 개념이 상태가 어떻게 관리되는지 알기에는 좋지만 사용하기에 꽤나 불편하다는 느낌이 있었고, 리액트 스러운 라이브러리인 Recoil을 사용하게 됬다.

 

관련글

2022.11.11 - [프로젝트/플랜트하이커 - 식물생활 종합앱] - [Recoil Protected Route] Recoil을 이용한 라우트 접근권한 설정

2. Atom을 '구독' 하는 형태로 동작

위와 같이 복잡하게 동작하는 상태 역시 아주 간단하게 구현할 수 있다. 기본적으로 Atom을 사용하는 모든 컴포넌트는 해당 Atom을 구독하는 형태로 동작하고, 해당 Atom을 기반으로 파생된 상태인 Selector역시 해당 Atom을 구독한다.

 

이는 Atom이 변경된다면 해당 Atom을 구독하는 모든 Selector와 Component 역시 자동으로 변경된다는 것으로, 개발자 입장에서 따로 신경 쓸 필요 없이 복잡한 상태관리를 구현할 수 있다는 장점이 있다. (이점은 장점이자 단점이 될 수 있다.)

 

3. 다양한 기능을 기본적으로 제공

복잡한 상태를 관리하기위한 다양한 기능들을 제공한다. 비동기 데이터 역시 관리하기 쉽게 되어있고, React 18v 에 추가된 Suspense 와 조합하면 보다 쉽게 비동기 데이터를 관리할 수 있다.

또 Selector 은 순수함수를 지향하기 때문에 같은 Input에 같은 Output을 내뱉도록 기본적으로 상태를 캐싱한다. 이와같은 형태로 여러가지 기능을 제공하는데, 이를 이용해 복잡한 코드 구현없이 불필요한 재랜더링 및 기타 성능이슈를 최소화 하기위해 설계되어있다.

 

4. '메타' '페이스북' 라는 거대기업이 만든 라이브러리

리액트를 만든 메타가 만든 리액트를 위한 상태관리 라이브러리라는 점에서 기대할 만 하다.  삼성이 만든 폰케이스 같은느낌이랄까

사실 거대 테크기업이 오픈소스 라이브러리를 만들어내는 건 그리 찾기 어려운 사례는 아니다. Velcel 이 만든 Next.js 나, 에어비엔비에서 만든 Lottie, 구글이 만든 Angular 와 같이 다양한 오픈 소스 라이브러리들이 거대 테크기업주도로 만들어졌고, 유지보수 하고 있다.

라이브러리를 선택할 때 해당 라이브러리의 관리주최가 누구인지는 꽤 중요하다 Vue.js의 사례를 보면 알 수 있듯, 한 개인이 만든 라이브러리의 경우 여러가지 구설수에 오르기도 한다.

 

---

단점

1. 아직 정식으로 출시되지 않은 라이브러리

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

눈여겨 볼 점은 아직까지 리코일은 정식버전이 아니라는 것이다. 리코일 깃허브 레포지토리에 가보면 About 부분에 위와 같이 써있고, 버전 역시 1.0이 출시되지 않은 실험 버전이라는 것을 볼 수 있다.

지금 당장 사용하는데에 문제가 없다면 이 부분은 간과하고 넘길 수 있다. 다만 프로덕션급으로 코드가 방대해 질 경우 신중하게 도입해야 한다.

아직 Recoil이 정식 버전이 아니므로 언제 대규모 업데이트가 벌어질 지 모르기 때문에, 버전업이 발생할 경우 기존에 작성한 코드를 거의 전부 뜯어고치는 정도로 업데이트가 이루어질 수 도 있다. 이는 커다란 기술부채를 안길 수 있기에 도입에 신중해야한다.

 

아직 프로덕션급의 코드를 접해보지 않은 필자의 입장에서 이를 간접적으로 체험해 볼 수 있었던 경험은 React Router의 업데이트 였는데, React Router가 업데이트 되면서 Path를 표현하는 방식이 바뀌었고, 이로인해 관련 자료를 찾기 매우 힘들었고, 공식문서를 읽어보면서 하나하나 처음부터 배워가는 경험을 한 적이 있다.

 

결론적으로 공식문서를 보고 공부하는 방법을 익힌 좋은 기회였지만, 당시에 코드를 작성하면서 정말 고역이었다.. 리액트를 처음 사용해보고 라우팅이라는 것에 대한 개념조차 잡혀있지 않던 상태였는데 예제코드 없이 맨땅에 부딪히며 만들어가는 경험이 썩 좋은 경험은 아니었다.

 

2. React만을 위한 상태관리툴

Recoil 은 리액트 만을 위한 상태관리 툴이다. Redux 나 Zustand 같은 상태관리 툴의 경우 React가 아닌 다른 프레임 워크나 자바스크립트 환경에서도 동작하는 상태관리 도구이지만 Recoil은 React에서만 동작하는 상태관리 툴이다.

개인적으로 이로 인해 Recoil이 아닌 다른 상태관리 도구의 사용을 고려하고 있다. React에만 의존적으로 동작하는 라이브러리 이고, 상태관리의 작동방식 역시 리액트에 의존적이다.

 

기존 다른 상태관리 라이브러리에 익숙한 개발자의 경우 리액트스럽게 동작하는 Recoil의 특징은 다른 상태관리 라이브러리와 사용법이 다르기에 또다른 러닝커브를 야기할 수 있다.

 

3. 테스팅, 개발자도구의 부재

아직 정식 버전이 아니어서인지 테스팅과 개발자도구의 부재가 있다.

몇몇 코딩과제를 통해 Recoil로 테스팅 코드를 작성해본 경험이 있는데 공식문서에 나와있는 테스팅에 관한 설명만으로 테스팅코드를 작성하기 꽤나 어려웠다. (인간은 적응의 동물이라 했던가.. 결국 하긴했다.)

리코일 공식문서에 나와있는 Dev Tools 설명

또한 정식 개발자도구가 없다는 점은 꽤 큰 단점으로 작용한다. 사실 있기는 하다 하지만 아직 완전한 기능이 아니고, 이 역시 정식버전이 아닌 테스트 버전이기에 오죽하면 훅 이름에 _UNSTABLE가 붙어 있다.

이로 인한 디버깅의 어려움이 있을 수 있다는 것도 리코일을 선택할 때 고려해봐야 할 점이다.

 

---

마치며

이 글은 Recoil을 까내리거나 예찬하는 글은 아니다. 개인적으로 Recoil을 좋아하고 편하게 사용하고 있지만 여러가지 단점 역시 존재하기 마련이다. 개발자는 자신이 처한 상황에 맞춰 적정기술을 선정해야하고, 이를 위해 참고하기 위한 글이라고 할 수 있다.

 

위에 나열된 단점들을 능가할 만큼 충분히 장점들이 가치가 있다면 Recoil을 선택해 사용하면 되는 것이고, 이는 프로젝트의 요구사항, 제약조건, 본인 뿐만아니라 개발 팀원의 선호까지 반영해서 가장 적절한 라이브러리를 정하는 능력을 길러야겠다.