React State 관리는 어떻게 할까?

React에서 state를 관리하는 방법, 혹은 라이브러리들은 여러가지가 존재한다. 아주 대표적으로 Redux가 있으며 Mobx, Context API, Recoil 등 다양한 State 관리 방법들이 존대한다. 이렇게 다양한 관리 방법 중에서 어떤 것을 선택할지 결정하는 것은 주니어 개발자인 나에게는 매우 어려운 결정이었다.

학원 팀프로젝트에서는 Redux를 사용했고 생성 방법과 state의 순환 구조에 대해서는 파악할 수 있었다. 하지만 Redux를 사용하면서 느꼈던 단점은 사용전 예열이라고 해야할 코딩들이 많이 필요하다는 점이었다.

구조 또한 복잡하기 때문인지 튜토리얼을 꽤 많이 돌려보면서 순환구조를 이해하는데 꽤 시간이 걸렸었다. 제대로된 프로젝트를 시작하기전에 React로 토이프로젝트를 진행하면서 Redux보다 적은 코딩으로 내가 원하는 결과를 도출할 수 있는것이 뭐가 있을까 고민했다. Context API, Mobx, Recoil

Context API

Context API의 장점은 React에 기본적으로 내장되어 있기 때문에 따로 라이브러리를 설치할 필요가 없다. 사용해보지는 않았지만 React 공식문서에는 Context API의 사용방법을 다음과 같이 정의하고 있다.

공식문서에서는 context API를 변경이 잦은 state관리에는 무리가 있다고 보고 있다. 사용하는 데이터의 속성을 유저정보, 테마, 언어 등에 국한하는것을 봤을 때 비지니스 로직에서 사용하는 state 관리에는 무리가 있는것 같다. 검색을 통해 React Hooks의 등장으로 Redux가 사라져야할까라는 주제로 많은 이야기가 나오고 있지만 결론적으로는 현재 리액트로는 프로젝트의 규모에 따라 다르겠지만 Redux는 필요하다고 보고 있다.

아직까지는 이런 상황에서 어떤 문제가 발생할지에 대해 자세히 모르겠지만 리덕스를 사용해본 입장에서 봤을때 리덕스의 구조를 사용하면서까지 Context API를 사용해야 할까라는 의문점이 생겼다.

학원동기 중에 Context API를 사용해서 리덕스의 구조로 State를 관리하는 방법을 봤는데 사용방법이 리덕스와 매우 흡사했다.

위 사진과 같은 방식으로 Context API를 사용한다면 Redux와 마찬가지로 부수적인 코딩을 많이 해야한다는 단점은 사라지지 않는다고 보여진다. 그래서 작년 5월에 Facebook OpenSource 팀에서 만든 라이브러리인 Recoil을 활용해 이런 부수적인 코딩 없이 State를 관리해 보고자 한다.

Recoil

Recoil 공식문서 : https://recoiljs.org/

npm 사용시

npm i recoil

yarn 사용시

yarn add recoil

RecoilRoot

Recoil 역시 Context API나 Redux에서 사용했던 방식과 비슷하게 최상위 부모컴포넌트에 생성하여 자식 컴포넌트에서 최상위에서 State가 관리되는 방식으로 보여진다.

Atom

Recoil에서 Redux의 action과 비슷한 역할을 하는것으로 보여지는 것이 바로 atom 이라는 것이다 사용 방법은 위 사진과 같이 atom을 만든 후에 다른 컴포넌트에서 사용할때는 atom을 만들어놓은 js 혹은 ts 파일을 import 한 후에 useState와 같은 방식으로 사용할 경우 useRecoilState를 사용하면 된다.

useState를 사용해본 사람이면 어렵지 않게 사용가능하다.
그냥 똑같다... set하는것 까지도!

이후에는 만약 간단하게 validation으로만 사용한다면 useStateValue를 통해서 atom 값을 useRecoilValue() 안에 넣어주면 변경이 이루어진다면 현재 값을 다시 랜더링 하게된다.

나만의 생각인지는 모르겠지만 이름 자체를 Atom이라고 지은 이유가 React 구조를 atomic 패턴으로 짜는것을 좋아하는 개발자가 만든것이 아닐까 생각이 든다. React 프로젝트를 하면서 가장 큰 장점은 Component 단위로 구조화하여 코드의 가독성과 재사용률이 높이는것이라고 생각하는데 이런 관점에서 Atomic 패턴으로 프로젝트를 만들면 기존에 state를 prop로 전달하는 방법을 사용하는 것보다 가독성이 높아진다고 생각이 든다.

위 글은 리액트 공식문서에서 발췌한 내용인데 내 생각에는 프로젝트가 커지고 상위 컴포넌트에서 다수의 하위 컴포넌트들을 제어해야 할 경우 오히려 코드의 가독성이 떨어진다는 생각이 들었다. 아토믹 패턴의 구조화를 고려한다면 Recoil이 코드 수를 줄이면서 편하게 사용할 수 있는 라이브러리가 아닐까 하는 생각이 들었다.

Selector

Selector는 state의 변화에 따라 값이 변하는 function 구조에서 사용되는 것이다. state를 변수로 사용하여 새로운 값을 도출할 때 사용되어 지는 것으로 보이며 예제를 보면 input 값의 길이의 변화에 따라 해당 결과값이 바뀌는것을 볼 수 있다. validation 이외에 filter나 좀 더 복잡한 로직이 필요로 했을 때 사용하면 좋을 것이라고 생각된다.

Good Example

참고자료 (Youtube) : https://youtu.be/wHe6-2-ZX6Y

위 유튜브는 Recoil의 규칙을 이해하는데 도움이 많이 되었던 영상이었다.
다음 포스팅에서는 토이 프로젝트에서 사용했던 Recoil Code를 분석해보겠다.