230807) Recoil 과 Atom

redux 를 대체해서 사용할 수 있는 전역 상태 관리 라이브러리인 'Recoil' 에 대하여 간단하게 알아보자 :)

 

1. Recoil의 세팅 방식

Recoil의 세팅 방식은 아래와 같다.

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

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

위 코드처럼 최상단에 <RecoilRoot>를 감싸 준다. redux를 사용할 때 최상단에 store을 넣는 것과 비슷하다고 이해하면 된다!

* RecoilRoot를 import하는 것을 잊지 맙시다 ^_^!!

 

2. Atom

 

Recoil 에서는 데이터를 관리하기 위해 'Atom'이라는 것을 사용하는데, 이는 React의 state와 비슷한 개념이라고 생각하면 이해가 쉽다! 따라서 Atom을 이용한 데이터의 값을 수정하면, 전역에 뿌려져 있던 해당 Atom의 데이터들이 모두 수정된다! (= Atom에 변화가 있으면 재렌더링된다)

 

Atom은 key와 default라는 이름의 키:밸류값을 가진 두 가지의 값이 필요한데, 이때 아래의 조건에 맞도록 이를 설정해야 한다.

 

key: 전역적으로 '유일한' 고유 key 값으로 설정한다. (=중복불가능함)

default : Atom의 초기값을 설정한다. (initialState와 유사한 개념)

 

Atom 의 사용법은 useState와 매우 흡사하다. 이름만 useRecoilState로 사용하는 수준!

const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

코드 출처: https://recoiljs.org/ko/docs/introduction/getting-started/

Recoil 시작하기 | Recoil

예를 들자면 위와 같이 설정해 주면 Atom의 사용이 가능해진다!

 

심지어 Atom은 set과 value값을 분리해서 사용하는 것까지 가능하다(이건 정말 ... 갓이군요)

 

value만 사용할 경우

 const state = useRecoilValue('값')

set만 사용할 경우

const setState = useSetRecoilState('값')

 

처럼 설정하여 개별적으로 사용할 수 있다 (짱)

 

오늘도 잘 해냈다!