Recoil Tutorial

Atom

• Atoms 는 상태의 단위(atomic)이며, 구독과 업데이트, 즉 상태 값을 수정할 수 있다.
• atom 이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.
• atoms는 런타임에서 생성될 수도 있다. Atoms는 React의 로컬 컴포넌트의 상태 대신 사용할 수 있다.
• 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다.

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

atom 함수가 갖는 key 값은 고유해야한다. atom 함수와 동일하게 써주는 것이 좋다.
해당 atom 함수의 상태 를 사용하려면 useRecoilState() 라는 훅을 사용한다.
기존 리액트 hook, useState() 와의 차이는 컴포넌트가 공유가 가능하다는 점이다.

Selectors

• Selector 는 파생된 상태(derived state)의 일부를 나타낸다.

• Derived State 란, 순수 함수의 인풋을 상태(state)라 할 때, 수정되어 출력된 아웃풋을 파생된 상태라 부른다.

• 파생된 상태는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있는데, 이는 곧 state 간의 유기적인 연결로 이어진다.

• Todo list 를 예로 들자면, 이미 완료된 Todo 는 complete 라는 필터링을 거칩니다.

• 전체 todolist 라는 state 는 complete 라는 filter 를 거치면서 completed todolist, 즉 파생된 상태(derived state)가 리턴된다.

• 이렇게 함으로, 파생된 상태를 atom 에 저장하지 않는, 쓸모없는 상태의 보존을 방지한다.

• 최소한의 상태 집합만 atoms 에 저장하고, 다른 모든 파생된 데이터는 selectors 에 명시한 함수를 통해 효율적으로 계산한다.
  (Redux 도 이렇게 파생된 상태를 저장하진 않은 것 같은데..)

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

• filteredTodoListState 는 내부적으로 2개의 의존성 todoListFilterState 와 todoListState 을 추적한다.
  • get() 함수로 전달된 인자(atoms, selectors)는 자동으로 종속관계를 생성하며,
    참조한 atoms 와 selectors 가 업데이트 되면 이 함수도 다시 실행된다.
• 그래서 둘 중 하나라도 변하면 filteredTodoListState 는 재 실행된다.