Recoil은 페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리 입니다.
최대한 React의 시맨틱과 동작을 유지하면서 위의 문제점을 개선하기 위해 만들어졌고, 다음과 같은 특징을 지녔다고 합니다.
핵심 개념
Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다.
Atoms는 컴포넌트가 구독할 수 있는 상태의 단위이며 Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환해줍니다.
(1) Atoms
atom은 상태의 단위로, 값이 업데이트되면 값을 구독(subscribe)한 컴포넌트는 다시 렌더링이 됩니다.
Atoms는 atom함수를 사용해 생성할 수 있습니다.
컴포넌트에서 atom을 읽고 쓰려면 useRecoilState라는 훅을 사용해야 합니다.
React의 useState와 비슷하지만 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있습니다.
(2) Selectors
Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)입니다.
상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행됩니다.
Selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용됩니다.
최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors를 통해 계산함으로써 쓸모없는 상태의 보존을 방지하는 것입니다.
쉽게 생각하면 atom은 자유로운 원자로써 컴포넌트 밖에서 떠다니고 있고,
컴포넌트가 필요할 때마다 메서드로 get하거나 set을 해서 자유롭게 컴포넌트를 넘나들면서 사용할 수 있습니다.
직접 사용하고 있으니 많이 사용하고 알았을 때 업데이트할 수 있으면 해야겠다.
