Facebook에서 만든 React 상태 관리 라이브러리인 Recoil에 관한 포스팅입니다.
상태관리 라이브러리? 필요한 이유!
리액트 컴포넌트들은 내장된 상태 객체를 가지고 있습니다. 상태란 컴포넌트 렌더링 마다 지속되는 재산들을 저장하는 캡슐화된 데이터입니다. 리액트에서 상태를 다루는 법은 클래스 컴포넌트는 state를, 함수형 컴포넌트는 Hook을 이용한 useState를 볼 수 있습니다.
작은 규모의 프로젝트라면 적은 횟수의 상태 전달이 발생하고, 이것은 위의 방식으로 간단하게 해결할 수 있습니다. 하지만 프로젝트의 규모가 커지고 복잡하게 되면 컴포넌트간의 상태 교환이 많이 발생하게되고, 관리하기 어려운 상태가 될 수 있습니다. 이러한 문제를 해결하기 위해 상태관리 라이브러리를 사용합니다.
즉, 상태관리 라이브러리를 사용하면 쉽게 컴포넌트 간의 상태를 관리할 수 있습니다.
Recoil?
Recoil은 API, 의미, 동작을 최대한 리액트스럽게 유지하며 이를 개선하고자 페이스북에서 만든 상태관리 라이브러리 입니다.
리액트는 상태관리를 도와주는 기능이 없었습니다. Context API가 있긴 하지만 페이스북에서는 Context API를 이용해서 상태를 관리하는 방식은 어렵다고 판단했습니다.
장점
리액트의 상태관리 라이브러리에는 Redux, Mobx 등이 있습니다. 그 중에서 Recoil을 선택한 이유는 아래와 같습니다.
- Recoil은 배우기가 쉽습니다. 간단하며, Hooks을 사용하는 개발자들에게는 친숙한 API입니다. 아래 Recoil의 핵심개념에서 다루겠지만, Recoil 시작에서 RecoilRoot로 감싸기만 하면 되며, data선언은 atom을 통해 하고 useState를 Recoil의 useRecoilState로 바꾸기만 하면 사용할 수 있습니다. 이것은 동적인 키로 필요할 때도 마찬가지 입니다.
- 리액트처럼 일하고 생각합니다. 빠르고 유연한 공유 상태를 유지합니다.
- 실제 컴포넌트에서 사용하고 있는 데이터만 구독하는 것이 가능하고, 비동기적 데이터 흐름도 직접 제공합니다.
- 코드 분할을 손상시키지 않고 앱 전체에서 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행 취소 등을 구현할 수 있도록 도와줍니다.
Recoil 시작하기
핵심개념
- Atom : 하나의 작은 상태입니다. 일반적인 리액트의 상태로 컴포넌트든 구독이 가능합니다.
- useRecoilState : atom의 값을 읽고 update하는 hook입니다. React Hook의 useState와 같은 방식으로 사용하면 됩니다.
클래스형 컴포넌트의 상태관리에서 state와 setState를 합친것과 같습니다. - useRecoilValue : setter를 제외한 atom의 값만 제공합니다.
클래스형 컴포넌트의 상태관리에서 state의 역할입니다. - useSetRecoilState : setter만 제공합니다.
클래스형 컴포넌트의 상태관리에서 setState의 역할입니다. - Selector : 다른 atom들 혹은 selector들을 받아 사용하는 순수 함수로, atom의 상태에 의존한 동적인 데이터를 파생시킵니다. 받은 atom들 혹은 selector들 중 어떤 것이 업데이트되면, selector함수는 다시 평가되고 컴포넌트가 리렌더됩니다.
그림으로 표현하면 아래와 같습니다.
설치하기
Recoil을 시작하기 위해서 설치하겠습니다.
npm install recoil간단한 예제
Recoil을 사용해서 구현한 간단한 예제입니다.
동작은 아래와 같습니다.
조금 복잡한 예제
위의 예제보다 조금 복잡한 예제입니다. 복잡한 예제의 주요 특징은 아래와 같습니다.
1. 아이템을 추가할 수 있습니다.
2. 선택된 아이템은 오른쪽에 표시되며, 상단의 input box를 이용해서 해당 아이템의 이름을 변경할 수 있습니다.
3. 이미지와 데이터는 비동기적으로 로드된다.
복잡한 예제에서 추가되는 atomFamily는 atom과 동일하지만 인스턴스간의 구분이 가능하도록 매개변수를 받을 수 있습니다. 이를 이용해서 위의 첫번째와 두번째 요구사항을 만족시킬 수 있습니다.
동작은 아래와 같습니다.
전체 코드는 git에서 확인할 수 있습니다.
참고
