Recoil은 유일하게 내가 주도적으로 사용한 경험이 있는 상태 관리 라이브러리이다.
이번 졸업 프로젝트에 적용하기 위해서 간단하고 빠르게 익혀 사용할 수 있는 상태 관리 도구가 필요했는데, 지난 번 타 프로젝트에서 누군가 손쉽게 리코일을 추가해 사용법을 알려줬던 기억이 나 빠르게 프로젝트에 적용해 보기로 했다.
내가 리코일을 필요로 했던 상황은 아래와 같다.
1. 페이지에서 내용들을 등록하다가 다른 페이지에 갔다가 돌아오는 경우
"작업하시던 내용을 그대로 이어하시겠습니까?" 같은 프로세스가 필요했기 때문에
내용을 저장해둬야 했다.
2. 한 페이지 안에서 두 단계를 거쳐 행사를 등록하는 과정을 거치는데 이 과정에서 앞에서 입력받은 내용이 다음 단계에 영향을 끼치는 동시에 왼쪽에 위치한 네비게이션 바에도 영향을 끼쳐야 한다.
위와 같은 이유로 단순히 입력받은 내용을 매개변수로 넘기는 것보다는 전역 상태로 저장해두는 것이 사용하기에 편리하다고 생각이 들었다.
Recoil
Recoil
A state management library for React.
recoiljs.org
Recoil은 React 애플리케이션을 위한 상태 관리 라이브러리이다. 이는 React의 기본적인 상태 관리 영역에서 확장되어, 특히 복잡하고 대규모의 서비스에서 효율적인 상태 관리를 가능하게 한다.
Recoil은 FaceBook에서 개발 되었으며, React의 기존 개념과 잘 통합되도록 설계되었다.
Recoil을 사용하면 atoms에서 selectors를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다.
atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태 값을 동기 또는 비동기 방식을 통해 변환한다.
쉽게 정의하면 키와 기본 값을 정의하는 atoms을 만들어 useRecoilState로 상태를 업데이트하는 툴인 것.
그리고 selector는 기존의 atom이나 다른 selector로부터 계산된 값을 생성할 수 있게 해 주는 것.
솔직히 써봐야 이해하기 쉬운 것 같기는 하다.
아래는 Recoil에서 말하는 Recoil의 사용 이유이다.
- Recoil은 공유상태도 React의 내부 상태처럼 간단한 get/set 인터페이스로 사용할 수 있도록 boilerplate-free API를 제공한다.
- Recoil은 동시성 모드를 비롯한 다른 새로운 React의 기능들과의 호환 가능성도 갖는다.
- 상태 정의는 점진적이고 분산되어 있기 때문에, 코드 분할이 가능하다.
- 상태를 사용하는 컴포넌트를 수정하지 않고도 상태를 파생된 데이터로 대체할 수 있다.
- 파생된 데이터를 사용하는 컴포넌트를 수정하지 않고도 파생된 데이터는 동기식과 비동기식 간에 이동할 수 있다.
- Recoil은 탐색을 일급 개념으로 취급할 수 있고 심지어 링크에서 상태 전환을 인코딩할 수도 있다.
- 전체 애플리케이션 상태를 하위 호완하는 방식으로 유지하기가 쉬우므로, 유지된 상태는 애플리케션 변경에도 살아남을 수 있다.
즉, 다른 상태 관리 툴이 아닌 Recoil을 선택해야 하는 상황은 다음과 같다.
1. 복잡한 파생 상태 관리가 필요한 경우
- Recoil의 selector는 여러 상태를 결합하거나 파생 상태를 계산할 때 매우 강력하다. Redux와 같은 라이브러리에서도 파생 상태를 생성할 수 있지만, Recoil의 selector는 기본적으로 캐싱을 지원하여 성능 최적화를 제공하고, 비동기 상태도 쉽게 처리할 수 있다.
2. React와의 자연스러운 통합을 선호하는 경우
- Recoil은 React에서 작동하도록 설계된 라이브러리로, React의 상태 관리 방식과 일관된 API를 제공한다.
- 특히 React의 기존 useState와 비슷한 사용성을 원한다면 Recoil은 이를 자연스럽게 확장한 느낌을 준다.
3. 동적 상태가 필요할 때
- Recoil의 atomFaimily와 selectorFamily는 파라미터를 통해 상태를 동적으로 생성할 수 있도록 한다.
이는 동적 리스트나 상황에 따라 다른 상태가 필요한 경우 매우 유용하다.
4. 비동기 데이터 관리가 많은 경우
- selector는 비동기 함수를 기본으로 지원하므로 API 호출이나 비동기 데이터 처리가 매우 간편하다. Recoil은 별도의 설정 없이 바로 비동기 상태 관리를 구현할 수 있다.
- Redux에서 Redux-saga를 추가로 필요로하는 것과 달리 단독으로 비동기 상태관리를 할 수 있다는 뜻
* 사용법이나 문법 등은 굳이 추가하지 않겠다.
결론적으로 React와 비슷한 문법으로 자연스럽게 전역 상태 관리를 추가하거나 복잡한 비동기 데이터 관리 등이 필요한 경우에 사용하면 좋은 전역 상태 관리 툴이다.
다른 프로젝트들을 보니 Recoil은 로그인 상태 관리 혹은 전역 테마 상태 (다크 모드) 관리에 유용하게 사용되는 것 같다.
나도 후에 다크 모드 기능 구현을 시도해보고 싶었는데 그 때 Recoil을 유용하게 사용할 수 있을 것 같다.
'FE' 카테고리의 다른 글
| 전역 상태관리 도구들 비교와 분석 정리 3.Zustand (0) | 2024.11.12 |
|---|---|
| 전역 상태관리 도구들 비교와 분석 정리 1. Redux (0) | 2024.11.08 |
| [FE]useReducer 이해하기 (0) | 2024.08.25 |
| [FE] 기존 리액트 프로젝트를 PWA로 만드는 방법 (0) | 2024.08.17 |