[React] Recoil 사용법

전역 상태 관리 라이브러리 중 하나인 Recoil에 대해 정리해 보려고 해요

 

http://recoiljs.org/ko/docs/introduction/getting-started

Recoil 시작하기 | Recoil

---

1. 초기 설정

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { RecoilRoot } from "recoil";

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

 

 

---

2. atom 사용법

[store/atom.js]

import { atom } from "recoil";

const testState = atom({
  key: "testState",
  default: ["a", "b", "c", "d"]
});

export default testState;

 

[components/RecoilComponent.jsx]

import { useRecoilValue } from "recoil";
import testState from "../stores/atom";

const RecoilComponent = () => {
  const test = useRecoilValue(testState);
  
  return <div>{test}</div>;
};

export default RecoilComponent;

 

[결과화면]

---

3. selector 사용법

[store/testWithComma.js]

import { selector } from "recoil";
import testState from "./atom";

const testWithComma = selector({
  key: "testWithComma",
  get: ({ get }) => {
    const abcdArr = get(testState);

    return abcdArr.join(",");
  },
});

export default testWithComma;

 

[components/RecoilComponents.jsx]

import { useRecoilValue } from "recoil";
import testWithComma from "../stores/testWithComma";

const RecoilComponent = () => {
  const test = useRecoilValue(testWithComma);
  
  return <div>{test}</div>;
};

export default RecoilComponent;

 

[결과화면]

반응형

---

atom 그대로인 데이터가 아니라 가공된 데이터 모습으로 결과화면에 찍히는 것을 볼 수 있어요

Recoil 사용법이었습니다