[Recoil] 리코일의 기본 개념 (1) - RecoilRoot, atom, useRecoilState, useResetRecoilState

리코일은 리액트를 위한 상태관리 라이브러리이다. CMC 11기 활동을 하며 리코일을 처음 도입해봤는데 기본 개념에 대해 기술하고자 한다.

 

RecoilRoot

리코일의 모든 요소는 아래와 같이 RecoilRoot 내에서 써야한다. Test 컴포넌트 내에 recoil을 사용할 것이다.

//App.jsx

import React from "react";
import Test from "./Test";
import { RecoilRoot } from "recoil";

const App = () => {
  return (
    <RecoilRoot>
      <Test />
    </RecoilRoot>
  );
};

export default App;

---

atom

리코일은 기본적으로 atom을 사용하여 상태를 정의한다. 리덕스의 initialState와 비슷한 개념이라고 생각하면 된다. atom을 만들 때는 아래와 같이 만든다.

//Test.jsx

import {atom} from 'recoil';

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

이렇게 countState라는 atom을 만들었다. 상태를 정의할 때는 고윳값인 key를 설정하고, 기본값 default도 설정해줘야 한다. 이 상태를 사용하고자 할 땐 useRecoilState를 사용한다.

---

useRecoilState

리코일은 리액트스럽다. 상태를 관리할 때 useState 훅과 사용법이 매우 유사하다. 아래 코드를 통해 countState를 불러오고 상태를 변경하는 방법을 알아보자.

//Test.jsx

import React from "react";
import { atom, useRecoilState } from "recoil";

...

const Test = () => {
  const [count, setCount] = useRecoilState(countState);

  const addCount = () => {
    setCount((prev) => prev + 1); // state 변경
  };

  const minusCount = () => {
    setCount((prev) => prev - 1); // state 변경
  };

  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={addCount}>ADD</button>
        <button onClick={minusCount}>MINUS</button>
      </div>
    </div>
  );
};

export default Test;

---

useResetRecoilState

useResetRecoilState는 이름에서도 알 수 있듯이 주어진 상태를 기본값으로 초기화하는 함수를 반환한다. 이를 사용하는 RESET 버튼까지 만들면 Test.jsx는 아래와 같다.

//Test.jsx

import React from "react";
import { atom, useRecoilState, useResetRecoilState } from "recoil";

...

const Test = () => {
  const resetCount = useResetRecoilState(countState);
  const [count, setCount] = useRecoilState(countState);

  const addCount = () => {
    setCount((prev) => prev + 1); // state 변경
  };

  const minusCount = () => {
    setCount((prev) => prev - 1); // state 변경
  };

  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={addCount}>ADD</button>
        <button onClick={minusCount}>MINUS</button>
        <button onClick={resetCount}>RESET</button>
      </div>
    </div>
  );
};

export default Test;

 

결과는 아래와 같다.