💾 Recoil

1️⃣ Recoil이란?

React의 hooks와 어울리면서, React에 필요한 것들만 React스럽게 제작한 상태관리 라이브러리

기존의 Redux나 Mobx와 같은 상태 관리 라이브러리들은 React 라이브러리가 아님

store는 외부요인으로 취급되므로, React의 내부 스케줄러에 접근할 수 없음
- 동시성 모드의 등장으로 위 사실이 중요해짐
  - 동시성 모드 ❓
    
    프로그램을 독립적으로 실행할 수 있는 조각으로 나누어 구조화
    
    ➡️ 단일 스레드 사용의 한계를 깨고 애플리케이션을 보다 효율적으로 만듦
    
    참고 🔗 https://medium.com/swlh/what-is-react-concurrent-mode-46989b5f15da
기본적인 store 구성을 위해 많은 보일러 플레이트와 장황한 코드를 작성해야 함
비동기 데이터 처리 또는 계산된 값 캐시와 같은 중요한 기능을 해결하기 위해서는 또 다른 라이브러리를 사용해야 함

2️⃣ 설치

// npm 사용 시
npm install recoil
// yarn 사용 시
yarn add recoil

3️⃣ recoilRoot

import React from 'react';
import {
    RecoilRoot,
    atom,
    selector,
    useRecoilState,
    useRecoilValue,
} from 'recoil';

function App() {
    return (
        <RecoilRoot>
            <CharacterCounter />
        </RecoilRoot>
    );
}

recoil state를 사용할 컴포넌트를 RecoilRoot 태그로 감싸주어야 함

4️⃣ Atom

컴포넌트가 구독할 수 있는 React state, 하나의 상태

atom의 값을 변경하면 그것을 구독하고 있는 컴포넌트들이 모두 다시 렌더링됨
아톰을 생성하기 위해서는 어플리케이션에서 고유한 키 값과 디폴트 값을 설정해야 함
디폴트 값은 정적인 값, 함수, 비동기 함수(추후 지원) 등이 될 수 있다

export const nameState = atom({
  key: 'nameState',
  default: 'Yoonju Kim'
});

useRecoilState

atom의 값을 구독하여 업데이트할 수 있는 hook으로, useState와 동일한 방식

useRecoilValue

setter 함수 없이 atom의 값만 반환함

useSetRecoilState

setter 함수만 반환함

import {nameState} from './someplace'
// useRecoilState
const NameInput = () => {
  const [name, setName] = useRecoilState(nameState);
  const onChange = (event) => {
   setName(event.target.value);
  };
  return <>
   <input type="text" value={name} onChange={onChange} />
   <div>Name: {name}</div>
  </>;
}
// useRecoilValue
const SomeOtherComponentWithName = () => {
  const name = useRecoilValue(nameState);
  return <div>{name}</div>;
}
// useSetRecoilState  
const SomeOtherComponentThatSetsName = () => {
  const setName = useSetRecoilState(nameState);
  return <button onClick={() => setName('Jon Doe')}>Set Name</button>;
}

5️⃣ Selector

상태에서 파생된 데이터로, 다른 atom에 의존하는 동적인 데이터를 만들 수 있게 해줌

get
set : 하나 이상의 atom을 업데이트할 수 있음

// 동물 목록 상태
const animalsState = atom({
  key: 'animalsState',
  default: [{
    name: 'Rexy',
    type: 'Dog'
  }, {
    name: 'Oscar',
    type: 'Cat'
  }],
});
// 필터링 동물 상태
const animalFilterState = atom({
 key: 'animalFilterState',
 default: 'dog',
});
// 파생된 동물 필터링 목록
const filteredAnimalsState = selector({
 key: 'animalListState',
 get: ({get}) => {
   const filter = get(animalFilterState);
   const animals = get(animalsState);

   return animals.filter(animal => animal.type === filter);
 }
});
// 필터링된 동물 목록을 사용하는 컴포넌트
const Animals = () => {
  const animals = useRecoilValue(filteredAnimalsState);
  return animals.map(animal => (<div>{ animal.name }, { animal.type    }</div>));
}

참고 🔗 https://codesandbox.io/s/hik7u?file=/src/App.js