[ React ] recoil

🔴  Introduction

⚪  메타가 출시한 리액트 상태관리 라이브러리

⚪  2개 이상의 자손 컴포넌트로 상태를 전달할 때 유용하다

 

🟠  Official

설치 | Recoil

 

🟡  Install

 

react i recoil

 

🟢  Usage

⚪  default

 

// [ index.tsx ]
import { RecoilRoot } from "recoil";

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

 

// [ atoms.ts ] : 상태 관리 store
import { atom } from "recoil";

export const isDarkAtom = atom({
    key: "isDark",
    default: true,
});

 

// [ Set Atom Component ]
import { useSetRecoilState } from "recoil";
import { isDarkAtom } from "../atoms";

const Coins = () => {
  const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => setDarkAtom((prev) => !prev);
  return (
    <>
      <button onClick={toggleAtom}>Button</button>
    </>
  );
}

 

// [ Get Atom Component ]
import { useRecoilValue } from "recoil";
import { isDarkAtom } from "../atoms";

const Chart = () => {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    <span>{isDark}</span>
  );
}

 

⚪  selector

 

// [ atom ]
import { atom, selector } from "recoil";

export const minuteState = atom({
    key: "minutes",
    default: 0,
});

export const hourSelector = selector<number>({
    key: "hours",
    get: ({ get }) => {
        const minutes = get(minuteState);
        return minutes / 60;
    },
    set: ({ set }, newValue) => {
        const minutes = Number(newValue) * 60;
        set(minuteState, minutes);
    },
});

 

// [ App ]
import { useRecoilState } from "recoil";
import { hourSelector, minuteState } from "./atoms";

function App() {
    const [minutes, setMinutes] = useRecoilState(minuteState);
    const [hours, setHours] = useRecoilState(hourSelector);
    const onMinutesChange = (event: React.FormEvent<HTMLInputElement>) => {
        setMinutes(+event.currentTarget.value);
    };
    const onHoursChange = (event: React.FormEvent<HTMLInputElement>) => {
        setHours(+event.currentTarget.value);
    };
    return (
        <div>
            <input value={minutes} onChange={onMinutesChange} type="number" placeholder="Minutes" />
            <input onChange={onHoursChange} value={hours} type="number" placeholder="Hours" />
        </div>
    );
}

export default App;