Recoil로 React 상태 관리하기

Recoil 설치

npm install recoil

App, Counter.jsx 파일 생성

App에 RecoilRoot import

// App.jsx
import { RecoilRoot } from "recoil";

export default function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

Counter에 atom import

// Counter.jsx
import { atom } from "recoil";

export default function Counter() {
  return <div className="counter"></div>;
}

count 상태 아톰 선언

// Counter.jsx
import { atom } from "recoil";

const countState = atom({
  key: "countState",
  default: 0,
});

export default function Counter() {
  return <div className="counter"></div>;
}

useRecoilState 훅 호출

useRecoilState import 후 Counter 안에서 useState 훅처럼 사용할 수 있다.

// Counter.jsx
import { atom, useRecoilState } from "recoil";

const countState = atom({
  key: "countState",
  default: 0,
});

export default function Counter() {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div className="counter">
      count: {count}
      <br />
      <button onclick={() => setCount(count - 1)}>감소</button>
      <button onclick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

Selector

• 아톰에서 파생된 상태의 일부

• 주어진 상태를 수정하는 순수 함수

Selector import, Selector 함수 추가

// Counter.jsx
import { atom, selector, useRecoilState } from "recoil";

const countState = atom({
  key: "countState",
  default: 0,
});

const oddEvenState = selector({
  key: "oddEvenState",
  get: ({ get }) => {
    const count = get(countState);
    return count % 2 ? "홀" : "짝";
  },
});

export default Counter = () => {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div className="counter">
      count: {count} / 홀짝 : {oddEvenState}
      <br />
      <button onclick={() => setCount(count - 1)}>감소</button>
      <button onclick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

useRecoilValue import

// Counter.jsx
import { atom, selector, useRecoilState, useRecoilValue } from "recoil";

const countState = atom({
  key: "countState",
  default: 0,
});

const oddEvenState = selector({
  key: "oddEvenState",
  get: ({ get }) => {
    const count = get(countState);
    return count % 2 ? "홀" : "짝";
  },
});

export default function Counter() {
  const [count, setCount] = useRecoilState(countState);
  const oddEven = useRecoilValue(oddEvenState);

  return (
    <div className="counter">
      count: {count} / 홀짝 : {oddEven}
      <br />
      <button onClick={() => setCount(count - 1)}>감소</button>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

Recoil왕위를계승중.pdf
Selectors