[React] 🍒Recoil 사용법

▷ Recoil

간편하고 유연한 상태 관리를 도와주는 Recoil은
atom과 selector, 두 가지 유형의 상태를 정의할 수 있다.

atom: 변경 가능한 상태를 정의
selector: 다른 상태의 파생 값이나 변환된 값을 계산하기 위해 사용

🍒 설치

npm install recoil

---

🍒 RecoilRoot

index.js

// RecoilRoot 가져오기
import { RecoilRoot } from "recoil";

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

---

🍒 atom

atom/usernameState.js

// atom 가져오기
import { atom } from "recoil";

const usernameState = atom({
  key: "usernameState",
  default: "tata",
});

export default usernameState;

---

🍒 selector

get 함수를 정의하여 해당 상태를 계산할 수 있다.

selector/nameLengthState.js

// selector 가져오기
import { selector } from "recoil";

import usernameState from "../atom/usernameState";

const nameLengthState = selector({
  key: "nameLengthState",
  get: ({ get }) => {
    const username = get(usernameState);
    return username.length;
  },
});

export default nameLengthState;

---

🍒 useRecoilState, useRecoilValue

useRecoilState: useState처럼 상태 값 변경도 가능
useRecoilValue: 상태 값만 가져오기

import { useRecoilState, useRecoilValue } from "recoil";
import nameState from "../atom/usernameState";
import nameLengthState from "../selector/nameLengthState";

const Main = () => {
  const [username, setUsername] = useRecoilState(nameState);

  const name = useRecoilValue(nameState);
  const nameLength = useRecoilValue(nameLengthState);

  const changeName = () => {
    setUsername("chimmy");
  };

  const resetName = () => {
    setUsername("tata");
  };

  return (
    <>
      <span>{username}</span>
      <button onClick={changeName}>Change Name</button>
      <button onClick={resetName}>Reset</button>
      <p>{name}</p>
      <p>{nameLength}</p>
    </>
  );
};

export default Main;

---

🍒 useSetRecoilState, useResetRecoilState

useSetRecoilState: 상태 값 변경 가능
useResetRecoilState: 디폴트 상태 값으로 변경

import { useSetRecoilState, useResetRecoilState, useRecoilValue } from "recoil";
import nameState from "../atom/usernameState";

const Main = () => {
  const username = useRecoilValue(nameState);

  const resetName = useResetRecoilState(nameState); // 상태 값 변경 가능
  const change = useSetRecoilState(nameState); // 디폴트 상태 값으로 변경

  const changeName = () => {
    change("chimmy");
  };

  return (
    <>
      <span>{username}</span>
      <button onClick={changeName}>Change Name</button>
      <button onClick={resetName}>Reset</button>
    </>
  );
};

export default Main;

---

useSetRecoilState로만 상태 값 변경할 때

/* atom/infoState.js */
import { atom } from 'recoil';

const defaultValue = {
  info2: '',
  info4: '',
  date: '',
  info5: '',
  info6: [],
};

const infoState = atom({
  key: 'infoState',
  default: defaultValue,
});

export default infoState;

/* Title.jsx */
import { useSetRecoilState } from 'recoil';

function Title() {
  const setInfoState = useSetRecoilState(infoState);

  const handleInputChange = (e) => {
    const value = e.target.value;
      
    setInfoState((data) => ({ ...data, info2: value }));
  };
...