[react] recoil 사용법

전역적으로 원활한 상태관리를 도와주는 recoil
Recoil 공식문서를 바탕으로 사용법 정리해보기!

1️⃣ 설치하기

npm install recoil
yarn add recoil

2️⃣ 시작하기

RecoilRoot

최상위 파일에서 사용하고자 하는 컴포넌트를 RecoilRoot로 감싸준다.

import React from 'react';
import {
  RecoilRoot,
} from 'recoil';

function App() {
  return (
  	<RecoilRoot>
		<GlobalStyle />
        <Component />
	</RecoilRoot>
  );
}

3️⃣ 사용하기

Atom

Atom는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 atom을 구독한 모든 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.
atom은 고유한 key값을 통해 구별된다.

import { atom } from 'recoil';

const priceState = atom({
  key: 'pasta',
  default:  0
});

useRecoilState

컴포넌트에서 atom을 읽고 쓰려면 useRecoilState이라는 hook을 사용한다. react의 useState와 똑같다.

import { useRecoilState } from 'recoil';

function eating() {
  const [price, setPrice] = useRecoilState(priceState);
  return (
    <>
    	<h1>음식</h1>
    	<button onClick={setPriceState(12000)}>
          파스타 주문 버튼
        </button>
    </>
  );
}

useRecoilValue

컴포넌트에서 atom을 읽고만 싶을때, recoil 객체를 반환한다.

const price = useRecoilValue(priceState);

useSetRecoilState

컴포넌트에서 atom을 수정하기 위한 setter 함수를 반환한다.

const setPrice = useSetRecoilState(priceState);

useResetRecoilState

컴포넌트에서 atom의 값을 초기화 하고 싶을때 사용한다.

const reset = useResetRecoilState(priceState);

Selectors

Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다.컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 selectors를 구독하고 있는 모든 컴포넌트들은 렌더링된다.

atom에 대한 연산을 selector을 이용하면 다른 컴포넌트에서 수행할 수 있다. 로직을 분산시켜 효율적으로 관리할 수 있다.

const priceLabelState = selector({
  key: 'priceLabelState',
  get: ({get}) => { // 계산될 함수
    const price = get(priceState);  //get 인자를 통해 atoms와 다른 selectors에 접근
    const unit = '원';

    return `${price}${unit}`;
  },
});

import { useRecoilState } from 'recoil';

function eating() {
  const [price, setPrice] = useRecoilState(priceState);
  const priceLabelState = useRecoilValue(priceLabelState); // selector
  return (
    <>
    	<h1>음식</h1>
    	<button onClick={setPriceState(12000)}>
          파스타 주문 버튼
        </button>
		<p> 현재 음식 값 : {priceLabelState}</p>
    </>
  );
}

selector에서 다른 atom나 selector에 접근하면 자동으로 종속 관계가 생성된다. 따라서 참조했던 priceState atom이 변경되면 priceLabelState selector 도 변경된다.