Recoil에 대해 알아보자.

 

 

리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있다.

페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다."라는 내용을 장점으로 내세운다.

 

리코일을 사용해 어플리케이션을 구성하면 아래와 같은 형태가 된다.

리코일은 전역으로 사용할 값의 단위로 데이터를 관리하며, 이 값들을 아톰(Atom)이라 부른다.

 

Redux와의 차이

flux 아키텍처 기반의 리덕스는 안정적인 전역상태 관리가 가능하지만, 몇가지 문제들이 있었다.

1. 리액트 전용 라이브러리가 아니다. 
   • 리액트 관점에선 Store가 외부요인으로 취급되며, 동시성 모드를 구현하기에 호환성이 부족하다.
2. 복잡한 Boiler Plate 초기세팅이 요구된다.
   • Store, Action, Reducer 등 다양한 구성요소가 필요해 비효율적이며 러닝커브가 높다.
3. 비동기 데이터에 추가 리소스가 요구된다.
   • Redux-saga 등 전역상태에 비동기 데이터를 호출하기 위한 서드파티 라이브러리가 필요하다.

리덕스는 초심자가 배우기에는 액션, 디스패치, 리듀서의 관계도 난해했을 뿐더러, 실제로 구현할 때는 "store.js 를 만들고, todoReducer.js 를 만들고, rootReducer.js 를 만들고, 이를 combineReducers 로 묶는다..." 와 같은 쉽지않은 과정의 연속이다..

 

Recoil 출시 배경

리코일은 우선 리액트 전용 라이브러리인 만큼 리액트 내부 접근성이 용이하다.

특히, 리액트 동시성 모드, 서스펜스 등을 지원하기 때문에 사용자 경험 관점에서도 매우 유리한 웹 어플리케이션을 만들 수 있다.

 

또한, 리코일은 복잡한 구현은 전부 내부적으로 처리하고, 사용자는 리코일 커스텀 훅만을 사용해 상태를 조작할 수 있게 함으로써 코드를 말도 안되게 간단하며 리액트 문법과 매우 유사해 러닝커브가 낮다는 장점을 가진다.

 

Recoil 주요개념

리코일을 사용하면 atoms(공유 상태)에서 selector(순수 함수)를 거쳐 리액트 컴포넌트로 내려가는 data-flow graph를 만들 수 있다.

 

Atoms

리코일 상태의 단위를 의미한다. 컴포넌트간에 이 상태는 공유되며, 구독 및 업데이트가 가능하다.

atom의 상태가 업데이트 되면, 이를 구독하던 컴포넌트들이 모두 리랜더링 된다.

 

Atoms를 설정할 땐, 리코일의 atom() 매서드를 통해 변수에 할당해주면 된다.

이때, key, default 2개의 프로퍼티를 필수로 설정해야한다.

• key : 고유한 key 값(중첩되지 않아야 한다), 보통 해당 atom을 생성하는 변수 명으로 지정.
• default : atom의 초기값을 정의한다. 정적인 값, promise, 다른 atom의 값으로 설정할 수 있다.

 

Selector

atom 혹은 다른 Selector 상태를 입력받아 동적인 데이터를 반환하는 순수함수이다.

상태값에서 비롯된 파생 데이터를 만들 때 사용되며, atom처럼 컴포넌트가 이를 구독할 수 있다.

Selector가 참조하던 다른 상태가 변경되면 이도 같이 업데이트되며, 이 때 Selector를 바라보던 컴포넌트들이 리랜더링 된다.

 

Selector를 설정할 때도, Recoil의 selector() 메서드를 통해 등록하면 된다. 기본적으론, key와 get 2개의 프로퍼티를 설정한다.

• key : 고유한 key 값
• get : Selector 순수함수. 사용할 값을 반환하며, 매개변수인 콜백객체 내 get() 메서드로 다른 atom 혹은 selector를 참조한다.

 

전역상태 관련 Hooks

전역상태(Atoms, Selector)를 조작하기 위해 리코일에서 제공하는 Hooks들을 사용한다.

• useRecoilState() : useState()와 유사하다. [state, setState] 튜플에 할당하며, 인자에 Atoms(혹은 Selector)를 넣어준다.
• useRecoilValue() : 전역상태의 state 상태값만을 참조하기 위해 사용. 선언된 변수에 할당하여 사용하면 된다.
• useSetRecoilState() : 전역상태의 setter 함수만을 활용하기 위해 사용된다. 선언된 함수변수에 할당하여 사용하면 된다.
• useResetRecoilState() : 전역상태를 default(초기값)으로 초기화 하기 위해 사용. 선언된 함수변수에 할당하여 사용하면 된다.

 

 

 

참고 : https://abangpa1ace.tistory.com/212