[React] Recoil 설정과 대표 기능 소개

1. recoil install

yarn add recoil

2. index.js에 Recoil Root 추가하기

import { RecoilRoot } from "recoil";

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

 

3. recoil폴더를 만들고 Atom.jsx

import { atom } from "recoil";

export const Atom = atom({
  key: "textState", // 유니크한 이름 짓기
  default: {
    name: "LeeCJ",
    age: 30,
  }, // default value (aka initial value) 이니셜스테이트
});

default에 초깃값을 설정한다. 

 

세팅 끝! 

 

딱 세가지만 알면 된다. 

 

1. useRecoilState

useState와 용법이 같다. Atom에 저장된 초기값을 담은 user라는 상태값, 변경함수 setUser

useRecoilState뒤 소괄호에 Atom이름을 넣어야한다(import도 해야함)

import { useRecoilState } from "recoil";
import { Atom } from "./recoil/Atom";
...
const [user, setUser] = useRecoilState(Atom);

 

2. useRecoilValue

위 UseRecoilState에서 useState와 같은 문법으로 state를 가져온 것 처럼 UseRecoilValue는 상태값만 필요할 때 이용한다. 

즉, 변경함수는 필요 없고 Atom의 상태값만 필요할 때 useRecoilValue를 쓴다. 

import { useRecoilValue } from "recoil";
import { Atom } from "../recoil/Atom";
...
const { name } = useRecoilValue(Atom);

3. useSetRecoilState

useSetRecoilState는 반대로 상태값은 필요없고 변경함수만 필요할 때 쓰인다. 

import { useSetRecoilState } from "recoil";
import { Atom } from "../recoil/Atom";
...
const setChange = useSetRecoilState(Atom);
  const changeUser = () => {
    setChange({ name: "바보", age: 30 });
  };

 

 

setter함수로 디테일하게 상태변경하는(전체가 아닌 일부의 상태만 변경하는) 방법은 이번 연휴동안 더 공부해봐야 할 것 같다