Recoil 사용하기

Recoil 공식문서를 바탕으로 사용법을 정리하였습니다.

 

개념

• 뿌리(atoms)로부터 순수함수(selectors)를 거쳐 컴포넌트로 흐름
• React의 내부에서 사용하는 상태관리(ex. usestate)처럼 get/set을 사용하여 전역 상태 관리

 

 

패키지 설치

npm install recoil

 

 

라이브러리 불러오기

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

 

 

RecoilRoot

RecoilRoot는 root component에 사용

function App() {
  return (
    <RecoilRoot>    // 이렇게 감싸주어야 함
      <MainComponent />
    </RecoilRoot>
  );
}

 

 

Atom

Atom은 Recoil에서 상태(state)를 정의함

• 어떤 컴포넌트에서도 읽고 쓸 수 있음
• atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독함
  • atom의 값이 변경될 시 해당 atom을 구독하는 있는 모든 컴포넌트가 새로운 값을 반영해 재 렌더링됨
  • 즉, 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유함
  • 구독 = 값을 참조하다 = 사용하다

const fontSizeState = atom({
	key: 'fontSize',
	default: 14, 
}); // 초기값을 14로 가지는 fontSizeState 생성

 

 

Selector

atoms나 다른 selectors를 입력으로 받아들이는 순수 함수로, 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용

• 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행됨
• 컴포넌트들은 selectors를 atoms처럼 구독할 수 있고, selectors가 변경되면 컴포넌트들도 다시 렌더링 됨

const fontSizeLabelState = selector({
	key: 'fontSizeLabelState',
	get: ({get}) => {
		const fontSize = get(fontSizeState);
		const unit = 'px';
		
		return `${fontSize}${unit}`;
	},
});

 

 

useRecoilState()

컴포넌트가 Recoil 상태를 읽고 쓰려고 할 때 사용하는 hook

• [Recoil 상태, setter 함수] 형태의 배열을 리턴함

const nameState = atom({
	key: "name",
	default: "dduniverse",
})

const [name, setName] = useRecoilState(nameState);

• state: atom 또는 쓰기 가능한 selector
• setState: state를 업데이트하는 함수

 

 

useRecoilValue()

컴포넌트가 Recoil 상태를 읽을 때만 사용하는 hook

• Recoil 상태의 값을 리턴함

const nameState = atom({
	key: "name",
	default: "dduniverse",
})

const name = useRecoilValue(nameState);

 

 

useSetRecoilState()

컴포넌트에서 Recoil 상태를 읽지 않고 쓰기만 할 때 사용하는 hook

• setter 함수만 리턴함

const nameState = atom({
	key: "name",
	default: "dduniverse",
})

const setName = useSetRecoilState(nameState);

 

 

useResetRecoilState()

컴포넌트에서 Recoil 상태를 기본값으로 리셋할 때 사용하는 hook

• reset 함수를 리턴함

const resetName = useResetRecoilState(nameState);