Recoil) Recoil의 기본, atom과 selector

갑자기 recoil이 핫해졌다.
상태관리툴로 redux만 꾸준하게 써오고 있었는데, 새로운 상태관리툴이라니!
하지만
1. 생각보다 새롭지 않았고
2. 생각보다 어렵지 않았다. 
따라서 스터디에서 발표한 자료를 기록해둔다!

• Recoil이 왜 좋은가?
  • 다른 상태관리 솔루션의 단점
    • redux에서 비동기 데이터 처리를 위해서는 다른 라이브러리를 추가로 사용해야한다(ex. redux-thunk)
    • 네이티브 솔루션 (context API) 은 데이터의 일부만 구독할 수 없으며, 복잡하고 반복되는 동적인 값에는 쓰기 애매하다.
    • 모든 것이 하나의 context에 들어있기 때문에 한 번 값이 바뀌면 상관없는 것들도 모두 리렌더링된다. (memoize를 매번 쓰기엔..)
  • Recoil은 실제로 컴포넌트에서 사용하는 데이터의 일부만 구독하는 것이 가능하며, 동적인 키를 만들어 설정하는 것도 쉽다.
• Recoil을 사용하기 위해서는 atom 과 selector에 대한 이해가 필요하다.
• atom
  • atom은 구독이 가능한 하나의 작은 상태이다.
  • 전역에서 고유한 키값을 string으로 넣어줘야한다.
  • 또한, 처음 생성시 취급할 default 값도 넣어줘야한다.

  • const colorState = atom({
      key: 'colorState',
    	default: [{
        name: 'soo',
        color: 'yellow',
      }, {
        name: 'woo',
        color: 'blue',
      }]
    });

• 이렇게 선언한 state는 어떤 행위를 할 것인가에 따라 연관된 3가지의 API들을 통해 이용할 수 있다.
  • useRecoilState: atom의 값을 구독 + 업데이트함. react의 useState와 사용방법이 같다.
  • useRecoilValue: atom의 값을 제공한다. 구독할 때 용이하다.
  • useSetRecoilState: atom의 값을 업데이트할 수 있는 setter만 제공한다.
• 그러니까 간단히 말해서 atom의 상태를 보기만 할거냐, 바꾸기만 할거냐, 둘 다 할거냐 이거다.
• selector
  • 주어진 값에 대해 항상 동일한 값을 반환한다.
  • 함수 혹은 파생된 상태를 반환하는 순수함수의 일종.
  • get 함수가 제공되면 RecoilValueReadOnly로 반환한다.
  • set 함수도 제공되면 RecoilState 객체를 반환한다.

  • const colorFilterState = atom({
     key: 'colorFilterState',
     default: 'yellow',
    });
    
    const filteredNameState = selector({
     key: 'filteredNameState',
     get: ({get}) => {
       const filter = get(colorFilterState);
       const infos = get(colorState);
       return infos.filter((info) => info.name === filter);
     }
    });
    
    // 이제 동적으로 특정한 색을 좋아하는 사람을 뽑아낼 수 있다.
    
    const Infos = () => {
      const infos = useRecoilValue(filteredNameState);
      return infos.map(info => (
           <div>{ info.name }, { info.color }</div> )
      );
    }

이렇게 하면 atom의 값이 변할 때 마다 해당 atom을 구독하는 컴포넌트들이 바로바로 바뀐다. 
비동기는 어떻게 할지 좀 궁금해졌다. 다음 포스트에 써야지.