이미지 보기

[Recoil] Recoil, atom과 selector

22.10.25 작성

읽는 데 3분

Recoil

FaceBook에서 만든 React 전용 상태관리 라이브러리
비동기 데이터 흐름을 위한 내장 솔루션 제공
초기 세팅이 직관적이고 간단

Recoil의 사용

시작

설치

$ npm install recoil

$ yarn add recoil

RecoilRoot

사용하고자 하는 부모 컴포넌트에 <RecoilRoot>를 넣는다.
보통 최상휘 root인 루트 컴포넌트에 넣는다.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { RecoilRoot } from 'recoil';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

Atom

데이터 상태의 단위
Redux에서는 store, Vuex에서는 state의 개념
업데이트와 구독 가능
atom이 변경되면, 이를 구독하는 곳은 모두 리렌더링된다.

// src/state/QuizDifficulty.ts
import { atom } from "recoil";

export default atom<string | undefined> ({
  key: 'QuizDifficulty',
  default: undefined,
})

atom : 객체를 parameter로 받는 function
key : 수많은 atom들에 대한 식별자, 고유한 string이 들어가야 한다.
default : global state에 할당하고 싶은 key에 기본값

Selector

Atom이 있는데 왜 Selector가 또 필요할까?

Atom에 비해 get과 set, 2가지 기능을 더 할 수 있기 때문
key : atom의 key와 동일한 key이며 프로젝트 내의 selector들에 대해 고유
get : atom을 구독하며 atom이 바뀌는 경우 함께 저장된 로직을 재구성
set
- parameter로 호출한 set함수 내부의 atom을 변경
- set 내부에서의 get은 구독하지 않고, atom이나 selector의 값을 찾는 데에만 사용
- 매개변수 2개 중 전자는 Recoil의 상태(state), 후자는 state를 바꿀 새로운 값

export default selector<TResponseData>({
  key: 'initialOrderState',
  ...
  set: ({ get, set }) => {
    const amount = get(QuizNumbersState);
    const difficulty = get(QuizDifficultyState);

    set(QueryDataState, { amount, difficulty });
    set(QuizNumbersState, DEFAULT_NUMBERS);
    set(QuizDifficultyState, undefined);
  },
});

References

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[Recoil] Recoil, atom과 selector

TOC

Recoil

Recoil의 사용

시작

Atom

Selector

References