[Recoil] 공식문서로 공부하기

Recoil 시작하기

Recoil은 React를 위한 상태 관리 라이브러리이다.

따라서 Recoil을 사용하기 위해서는 React가 설치 되어 있어야 한다.

React 애플리케이션을 시작하는 가장 좋은 방법은 CRA(Create React App)을 사용하는 것이다.

npx create-react-app my-app

---

Recoil 설치하기

npm install recoil
(or)
yarn add recoil

---

RecoilRoot

Recoil 상태를 사용하는 컴포넌트 부모 트리 어딘가에 나타나는 RecoilRoot가 필요합니다. RecoilRoot를 넣기 가장 좋은 장소로는 루트 컴포넌트가 있습니다.

// App.js
import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

import CharacterCounter from "./Components/CharacterCounter";

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

 

// Components/CharacterCounter.js
import React from "react";

const CharacterCounter = () => {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
};

export default CharacterCounter;

---

Atom

Atom은 상태(state)의 일부를 나타냅니다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있습니다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독합니다.

그래서 atom에 어떤 변화가 일어나면 그 atom을 구독하고 있는 모든 컴포넌트들이 재렌더링 됩니다.

// Recoil/test.js

const { atom, selector } = require("recoil");

const textState = atom({
  key: "textState", // unique ID (with respect to other atoms/selectors)
  default: "", // default value (aka initial value)
});

export { textState };

 

컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 사용합니다.

// Components/ChracterCounter.js

import React from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { textState, charCountState } from "../Recoil/test";

const TextInput = () => {
  const [text, setText] = useRecoilState(textState);

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

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
};

---

Selector

Selector는 파생된 상태(derived state)의 일부를 나타냅니다. 파생된 상태는 상태의 변화를 의미합니다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각 할 수 있습니다.

// Recoil/test.js

const { atom, selector } = require("recoil");

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

 

useRecoilValue() Hook을 사용하면 값을 읽을 수 있습니다. 나는 써보면서 Redux의 미들웨어라고 느꼈다.

// Components/ChracterCounter.js

import React from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { textState, charCountState } from "../Recoil/test";

const CharacterCount = () => {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
};