Recoil 이란?
Recoil은 Atom으로부터 시작해서 Selector를 거쳐 React 컴포넌트까지 전달되는 하나의 Data-Flow Graph를 만들게 한다.
Atom은 컴포넌트들이 구독(subscribe)할 수 있는 단위이고, Selector는 동기적 혹은 비동기적으로 상태를 변환한다. 이 두 가지의 핵심 개념으로 이루어진 라이브러리가 Recoil 이다.
Recoil의 장점
Recoil은 배우기 쉽다. API가 단순하고 이미 hook을 사용하고 있는 사람들에게 익숙할 것이다. Recoil을 시작하기 위해서는 어플리케이션을 RecoilRoot로 감싸고, 데이터를 atom이라는 단위로 선언하여 useState를 Recoil의 useRecoilState로 대체해야 한다.
컴포넌트가 사용하는 데이터 조각만 사용할 수 있고, 계산된 selector를 선언할 수 있으며, 비동기 데이터 흐름을 위한 내장 솔루션까지 제공한다.
동적 키로 atom을 만들고, selector에 인자를 보내는 등 모두 간단하게 할 수 있다.
Recoil의 핵심개념
(1) Atom
-
atom은 상태의 단위로, 값이 업데이트되면 값을 구독(subscribe)한 컴포넌트는 다시 렌더링이 된다.
-
Atoms는 atom함수를 사용해 생성할 수 있다.
-
컴포넌트에서 atom을 읽고 쓰려면 useRecoilState라는 훅을 사용해야 한다.
-
React의 useState와 비슷하지만 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있다.
(2) Selectors
-
Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)이다.
-
상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다.
-
Selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다.
-
최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors를 통해 계산함으로써 쓸모없는 상태의 보존을 방지한다.
-
쉽게 생각하면 atom은 자유로운 원자로써 컴포넌트 밖에서 떠다니고 있고,
컴포넌트가 필요할 때마다 메서드로 get하거나 set을 해서 자유롭게 컴포넌트를 넘나들면서 사용할 수 있다.
참고블로그
https://ui.toast.com/weekly-pick/ko_20200616
https://velog.io/@brb1111/Recoil-%EC%9D%B4%EB%9E%80
https://medium.com/humanscape-tech/recoil-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-285b29135d8e
