Recoil 알아보기

왜 Recoil 인가?

컴포넌트가 사용하는 데이터 조각만 사용할 수 있고 계산된 selector 를 선언할 수 있으며 비동기 데이터 흐름을 위한 내장 솔루션도 존재한다.

동적 키로 atom 을 만들고, selector 에 인자를 보내는 등 간단하게 가능하다.

 

Recoil 시작하기

npm install recoil

어플리케이션을 RecoilRoot 로 감싸고

 

데이터를 atom 단위로 선언해준다.

 

useState 는 useRecoilState 로 대체해주면 된다.

 

 

atom

atom은 하나의 상태이다.

컴포넌트가 구독할 수 있는 리액트 state와 유사하다.

즉, atom의 값을 변경하면 그것을 구독하고 있는 모든 컴포넌트들이 모두 리렌더링 된다.

 

먼저 atom을 생성하기 위해 어플리케이션에서 고유한 키 값과 디폴트 값을 설정해줘야 한다.

export const state = atom({
	key : 'key',
    default : 'default value',
});

 

useRecoilState

atom의 값을 구독하여 업데이트 할 수 있는 훅

useState 와 유사한 방식으로 사용

  const [atomState, setAtomState] = useRecoilState(state);

 

useRecoilValue

setter 함수 없이 atom의 값을 반환 -> atomState

useSetRecoilState

setter 함수만 반환 -> setStomState

 

selector

selector 는 상태에서 파생된 데이터

다른 atom에 의존하는 동적인 데이터를 만들 수 있게 한다.