<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> 해당 글은 사내 발표를 진행하기 위한 형태의 글로 작성되었습니다.

</aside>

Contents

Recoil에는 크게 두 개념이 있습니다. 하나는 atoms와 하나는 selectors입니다. 그리고 각각의 atoms를 구별된 값으로 가지기 위한 RecoilRoot가 있습니다. 우리가 error handling을 다루기 앞서 Recoil의 주요 개념들이 어떤식으로 동작 하는지 설명하고자 합니다.

Atoms

Recoil에서 하나의 전역 상태는 Atom이라고 부릅니다.

Atoms는 상태의 단위를 말하며 React state와 동일하게 값을 업데이트할 수 있습니다. 차이점이 있다면 atom은 구독이라는 개념이 존재합니다.

구독

Atom은 컴포넌트가 구독할 수 있는 상태의 단위입니다.

만약 Recoil API인 useRecoilState, useRecoilValue 등을 컴포넌트 내에서 사용한다면 해당 컴포넌트들은 atom을 구독한 상태로 간주되어 atom이 업데이트 될 때 구독한 컴포넌트만 부분 렌더링 됩니다.

function Text() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return <p style={{fontSize}}>This text will increase in size too.</p>;
}

Selectors

Selectors또한 다른 atoms, selectors를 입력으로 받아들이는 순수 함수이며 상위의 atoms, selectors가 업데이트 되면 하위의 selector 함수도 다시 실행됩니다.

Atoms와 동일하게 컴포넌트에서 구독 될 수 있으며 selectors가 변경되면 구독하는 컴포넌트 들만 부분렌더링 됩니다.

Customizing atom

순수하게 atom 값만 변경하고 싶다면 selector를 사용할 필요 없이 useRecoilState 를 사용하면되지만 입력된 atom값을 변형해서 가져오거나, 다른 atom값을 가져와 특정 atom에 default값을 지정하거나, 업데이트 하고자 할 때 사용되는 게 특징입니다.

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;
    }
  },
});