Orchemi

Orchemi

I start where others stop.

[Recoil] Recoil, atom과 selector

작성:    

업데이트:

카테고리:

태그: ,

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

댓글남기기

참고