안녕하세요. 이번에는 facebook에서 만들었으며, 최근 점유율이 많이 올라가고 있는 상태관리 라이브러리 recoil에 대해 알아보겠습니다.

Recoil 특징

• redux 의 store로 중앙집중으로 상태값을 관리하는 것이 아니라 atom이란 메서드로 원자식으로 상태를 관리 할 수 있다.
• 순수함수인 selectors를 거쳐 컴포넌트에 전해주는 data-flow이다.
• atoms는 컴포넌트가 구독할 수 있는 상태의 단위이다.
• selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환시킨다.

const testReocoilState = atom({
  key: 'testReocoilState',
  default: [],
});

• 이와 같이 atom에 고유한 키값과 기본 밸류 값을 작성하여 고유의 저장소를 만든다.

  const [recoilState, setRecoilState] = useRecoilState(testReocoilState);

• useRecoilState 훅을 사용하여 atom을 이용하여 만든 상태값을 recoilState에 넣을 수 있다.
• setRecoilState 을 이용하여 testReocoilState 키 값을 가진 상태값을 변경할 수 있다.
• 변경이 일어나면 해당 atom을 구독하고 있는 컴포넌트들에 리렌더링이 발생하여 업데이트가 일어난다

const selecotrTestReocoilState = selector({
  key: 'selecotrTestReocoilState',
  get: ({get}) => {
    const recoilState = get(recoilState);

    return recoilState.length;
  },
});

• selector 순수함수를 이용하여 입력값을 계산하여 출력값을 보여줄 수 도 있습니다.
• get 속성은 계산될 함수입니다.
• 전달되는 get 인자를 통해 atoms와 다른 selectors에 접근할 수 있습니다.
• 다른 atoms나 selectors에 접근하면 참조했던 다른 atoms나 selectors가 업데이트되면서 이 함수도 다시 실행됩니다.

  const selecotrTestReocoilState = useRecoilValue(selecotrTestReocoilState);

• selector는 useRecoilValue()를 사용해 읽을 수 있습니다.