[React] Recoil 이란?

in Study on react


Recoil이란?

Recoil은 페이스북에서 만든 React 상태 관리 라이브러리 입니다. React는 기본적으로 단방향 데이터 흐름을 따릅니다. 때문에 복잡한 상태관리를 위해선 상태를 끌어올리거나 Redux와 같은 상태 관리 라이브러리를 사용해야 했습니다. 하지만 Redux는 Boiler plate가 많다는 단점이 있었죠. 하지만 Recoil은 정말 쉬운 세팅으로 상태관리를 할 수 있도록 도와줍니다.

Recoil 사용 예시

import { atom, useRecoilState } from "recoil";

// 상태 정의
const counterState = atom({
  key: "counterState",
  default: 0,
});

//컴포넌트에서 상태 사용
function Counter() {
  const [count, setCount] = useRecoilState(counterState);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

atom함수를 사용하여 상태를 정의하고, useRecoilState 훅을 사용해서 해당 상태를 컴포넌트 내에서 사용합니다.