Recoil은 부모-자식 prop의 전달 문제를 해결한다!

기존에 리액트에서는 부모로부터 자식으로 prop을 전달하기 위해 먼 경로를 거쳐야 하는 문제가 있었다.

 

이 문제를 해결하기 위해 recoil이 도입되었다. 

 

recoil은 상태관리 라이브러리이고, redux보다 이해하기 쉽다. 

 

우선 npm install recoil을 해주고

 

상태관리하고싶은 것은 atom에 넣어준다.

atom에는 key와 default를 지정해준다. 

key는 atom을 식별하는데 사용되는 고유한 문자열이고, 

default는 atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector이다.

const namesState = atom({
  key: 'namesState',
  default: ['', 'Ella', 'Chris', '', 'Paul'],
});

그리고 다른 컴포넌트들이 atom을 구독하게 해준다.

 

useRecoilValue(state)는 주어진 recoil 상태의 값을 리턴한다. atom을 읽기만 할 때 이 Hook를 사용한다. 이 Hook는 atom에 컴포넌트를 등록하도록 한다.

import {atom, selector, useRecoilValue} from 'recoil';

const namesState = atom({
  key: 'namesState',
  default: ['', 'Ella', 'Chris', '', 'Paul'],
});

const filteredNamesState = selector({
  key: 'filteredNamesState',
  get: ({get}) => get(namesState).filter((str) => str !== ''),
});

function NameDisplay() {
  const names = useRecoilValue(namesState);
  const filteredNames = useRecoilValue(filteredNamesState);

  return (
    <>
      Original names: {names.join(',')}
      <br />
      Filtered names: {filteredNames.join(',')}
    </>
  );
}

 

useRecoilState(state)는 atom을 읽고 쓰려고 할 때 이 Hook을 사용한다. 이 Hook는 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>
  );
}