Recoil

Recoil Install

.<App Name>

$ npm install recoil

Setup

.<App Name> .src index.tsx

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") as HTMLElement
);
root.render(
  <RecoilRoot>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </RecoilRoot>
);

.<App Name> .src .recoil flex.ts

import { atom } from "recoil";
/**
 * Atom State의 일부, component에서 구독 가능
 */
export const flexState = atom<boolean>({
  key: "flexState",
  default: false,
});

export const flexDirectionState = atom<string>({
  key: "flexDirectionState",
  default: "flex-row",
});

export const mainAxisState = atom<string>({
  key: "mainAxisState",
  default: "justify-start",
});

export const crossAxisState = atom<string>({
  key: "crossAxisState",
  default: "items-start",
});

사용 방법

  // useRecoilState ≒ useState
  const [isFlex, setIsFlex] = useRecoilState<boolean>(flexState);
  const [direction, setDirection] = useRecoilState<string>(flexDirectionState);

  // value 만 꺼내 사용할 수 있음
  const isFlex = useRecoilValue<boolean>(flexState);
  const direction = useRecoilValue<string>(flexDirectionState);

적용 화면

---

Reference

TOAST UI 2022. 11. 6.(일) Recoil - 또 다른 React 상태 관리 라이브러리?