참고코드(redux-toolkit vs recoil): https://github.com/seungahhong/states-todos

리액트 상태 관리 로직의 한계점

• ContextAPI 부모와 자식간의 커플링에 의존성 발생
  • 특히 리렌더링에 문제점 발생
  • 상태관리는 아니다(최초세팅, read, write)

Recoil은 왜 필요한 걸까??

• 최대한 React 스러운 API 유지
• 사용하기 위한 부속 라이브러리 최소화(특히, redux, mobx, redux-toolkit)
  • redux/react 사용을 위해서 react-redux 라이브러리를 사용해야했던 이슈들을 리코일에서는 내부적으로 처리

• 부모 자식간의 의존성을 끊어주며, 독립적인 스토리지에서 컴포넌트에 데이터를 전달한다.
• 특히, 기존로직을 건드리지 않고 atoms, selector를 사용 시 바로 적용이 가능하다.

Recoil 철학

• 보일러플레이트가 적은 API(React Hooks) 사용하여서 React에 로컬 상태를 관리(useState, useReducer)

redux, reducer, constant

useEffect(() => {
  (async () => {
		await fetch~~
    -> redux 호출
  })();

}, []);

const allMainFetch = selector({
  key: 'allMainFetch',
  get: async ({ get }) => await get(fetch~~)
  })
});

const main = useRecoilValue(allMainFetch());

• 파생데이터 자동으로 업데이트 처리가 된다.(selector)
  • A, B ⇒ C를 변경한다면 기존에는 A, B 데이터를 가져와서 C를 변경해서 업데이트 했지만 리코일은 selector에 지정해준다면 자동으로 업데이트 된다.(디펜던시가 걸려있는 컴포넌트 자동 업데이트)
  • mobx에 compute와 동일하다고 함

// 파생데이터
const firstAtom = atom({
  key: 'firstAtomKey',
  default: 1
});

const secondAtom = atom({
  key: 'firstAtomKey',
  default: 1
});

const cumulatedSelector = selector({
  key: 'cumulatedSelector',
  get: ({ get }) => {
    return get(firstAtom) + get(secondAtom)
  } 
});

// atom
import {atom, useRecoilState} from 'recoil';

const counter = atom({
  key: 'myCounter',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(counter);
  const incrementByOne = () => setCount(count + 1);

  return (
    <div>
      Count: {count}
      <br />
      <button onClick={incrementByOne}>Increment</button>
    </div>
  );
}