[React] Recoil 뜯어보기

 

 

페이스북에서 만든 상태 관리 라이브러리

리액트 훅의 개념으로 상태 관리를 시작한다

아직 1.0.0 버전이 출시되지 않았다...

 

Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태 값을 동기 또는 비동기 방식을 통해 변환한다.

 

~기본적인 사용법~

RecoilRoot를 선언해 스토어를 만들고 atom이라는 상태 단위를 만들어 스토어에 등록한다.

이 atom들을 key값으로 구별해 atom의 상태 변화를 구독하고 값이 변경되면 forceUpdate를 통한 강제 렌더링으로 최신 atom값을 가져오게 한다.

 

 

RecoilRoot

최상단에 선언되어야 한다

=> recoil에서 생성되는 상태값을 저장하기 위한 스토어를 생성한다

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <RecoilRoot>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </RecoilRoot>
);

 

 

Atom

Recoil의 최소 상태 단위. 업데이트와 구독이 가능하다. atom이 업데이트되면 각각 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링된다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다.

type Statement = {
	name : string
	amount : number
}

const statementsAtom = atom<Array<Statement>>({
	key : 'statements',
	default : InitialStatements,
})

 

key : atom은 key값을 필수로 가지며 다른 atom과 구별하는 식별자가 된다. 애플리케이션 내부에서 유일한 값이어야 한다.

 

useRecoilValue

useRecoilState

 

selector

 

추가예정

 

 

참고 자료

도서 :: 모던 리액트 Deep Dive

https://recoiljs.org/ko/docs/introduction/core-concepts