Recoil

Recoil은 글로벌 상태관리 라이브러리입니다.

Redux가 인지도가 높고 많이 사용 되었지만 초기 세팅하는 부분은 간단한 상태 하나를 관리하더라도 많은 코드를 소모하였고 React에 최적화 된 라이브러리가 아니었기에 많은 불편함이 있었습니다.

Recoil은 React에 최적화 되어있으며, hook을 써본 React 개발자라면 쉽게 적응할 수 있어서 러닝커브가 낮고 많은 사람들이 Recoil을 사용하는 추세입니다.

개념

Atoms

Atoms는 상태의 단위이며, 업데이트와 구독이 가능합니다.
atom이 업데이트 되면 구독된 컴포넌트는 새로운 값을 반영하여 리렌더링 됩니다.
런타임에서 생성될 수도 있으며, 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유합니다

const SizeState = atom({
  key: 'SizeState' -> atom을 구분하기 위한 key로 자유롭게 작성하면 됩니다.
  default: 14 -> 기본값이며 배열, 객체, 문자열 등 다양한 형태가 가능합니다.
})

컴포넌트에서 atom을 쓰려면 useRecoilState 라는 훅을 사용합니다.

function SizeBtn() {
  const [size, setSize] = useRecoilState(SizeState -> 가져올 atom을 넣으면 됩니다.)
  return <button onclick={() => setSize((prev) => prev + 1)} style={{size}}>
    Size Up
  </button>;
}

굉장히 익숙한 형태입니다.
'Size Up' 버튼을 누르면 폰트의 크기가 커집니다.
위와 같이 한번에 부를 수도 있고 아래처럼 따로따로 부를수도 있습니다

const size = useRecoilValue(SizeState)
const setSize = useSetRecoilState(SizeState)

타입스크립트로 사용하려면 atom옆에 타입을 정의하면 됩니다.

type user = {
  id: string;
  pwd: string;
  name: string;
}

const userState = atom<user>{
  key: 'userState',
  default: {
    id: 'admin',
    pwd: 'admin',
    name: '관리자'
  }
}

Selector

Selector는 다른 atom이나 selector를 입력으로 받는 함수입니다.
Selector는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용됩니다.
최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selector에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지합니다.

selector 사용 방법

1. atom의 값에 접근
const setPxSize = selector({
  key: 'setPxSize',
  get: ({get}) => {
    const size = get(SizeState)
    const unit = 'px'
    return `${size}${unit}`
  }
})

const pxSize = useRecoilValue(setPxSize)

2. 비동기 통신
const apiCall = selector({
  key: 'apiCall',
  get: async() => {
    const res = await APICALL함수
    return res
  }

  or

  get: async() => await APICALL함수
})

Selector로 비동기 통신을 할때는 두가지 방법이 있습니다.
따로 작성하겠습니다.

기본적으로 get함수는 필수적이고 set함수는 아닙니다.
get함수만 제공되면 RecoilValueReadOnly 객체를 반환합니다.
set함수도 제공되면 쓰기도 가능한 RecoilState 객체를 반환합니다.

set함수를 이용해 여러개의 atom정보를 동시에 수정할 수 있습니다.