쉽고 간단한 상태관리 라이브러리 "Recoil"

자몽·2021년 8월 31일

Recoil

React

목록 보기

6/7

Recoil? 그게 뭔가요?

recoil은 react를 개발한 페이스북에서 만든 상태관리 라이브러리이다.

"React를 위한 상태관리 라이브러리"를 목표로 만들어진 recoil은 redux보다 react스럽고, 쉽고 간편하게 상태관리를 할 수 있다는 장점이 있다.

recoil의 핵심 키워드는 atom과 selector이다.

atom
react의 state와 유사한 의미를 가지고 있으며, recoil의 상태를 의미한다.

selector
Recoil에서 함수나 파생된 상태를 나타낸다.

selector의 설명을 조금 풀어서 설명하자면,
파생된 상태를 어떤 방법으로든 "주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물"로 생각할 수 있다.

예시를 들자면, 버튼을 누르면 count가 1씩 증가하는 앱을 만든다고 했을 때,
count의 상태를 관리해주는 countState를 atom을 통해 만들어준다.

이렇게 만들어진 countState는 selector를 통해 수정되어 기존에 '2'가 출력되던 결과물을 'count: 2'와 같이 새롭게 만들 수 있다.

한줄요약: selector는 atom 의 상태에 의존하는 동적인 데이터를 생성한다.

TodoList 만들기

recoil이 얼마나 쉽고 간단한지 직접 체험해보기 위해서 아주 간단한 TodoList를 제작해보겠다.

기본 세팅: index.js, App.js

루트 디렉터리에 있는 index.js파일에 RecoilRoot를 추가해준다.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { RecoilRoot } from "recoil";

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById("root")
);

redux를 사용할 때, Provider를 추가해 주는것과 같은 맥락이다.

App.js

import React from "react";
import TodoView from "./TodoView";
import TodoInput from "./TodoInput";

const App = () => {
  return (
    <>
      <TodoInput />
      <TodoView />
    </>
  );
};
export default App;

Recoil 사용하기: atoms.js

import { atom, selector } from "recoil";

export const todoState = atom({
  key: "todoState", // key는 언제나 고유해야 한다.
  default: 0 // 초기값
});

export const getTodo = selector({
  key: "getTodo",
  get: ({ get }) => {
    return get(todoState); // todoState를 get을 통해 그대로 읽어 return 한다.
  }
});

리스트 값 입력받기: TodoInput

TodoList에 값을 넣는 역할을 수행하는 컴포넌트이다.

import React, { useState } from "react";
import { useRecoilState } from "recoil";
import { todoState } from "./atoms";

const TodoInput = () => {
  const [Text, setText] = useState(""); 
  const [todo, setTodo] = useRecoilState(todoState);
  // atoms.js에서의 todoState의 default값이 0이였기에 초반 상태는 useRecoilState(0)와 같다.

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    setTodo(todo.concat(Text));
    setText("");
  };

  return (
    <div>
      <label>TodoLIST</label>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={Text}
          placeholder="일정 입력"
          onChange={onChange}
        />
        <button>제출</button>
      </form>
    </div>
  );
};
export default TodoInput;

코드를 자세히 보면 useState가 들어갈 것 같은 자리에 useRecoilState가 들어가있다.
눈치가 빠른 분들은 이미 알아차렸을 수도 있지만,
useRecoilState는 useState와 비슷하게 동작하지만, 전역으로 상태관리를 할 수 있다는 점이 큰 차이점이다.

이를 통해, todo의 상태는 전역으로 관리할 수 있게 만들었다.

입력받은 값 화면에 출력하기: TodoView.js

import React from "react";
import { useRecoilValue } from "recoil";
import { getTodo } from "./atoms";

const TodoView = () => {
  const todo = useRecoilValue(getTodo);
  return (
    <ul>
      {todo.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default TodoView;