react - recoil이란?

📌Recoil이란? 

비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는Redux, 그리고 Redux 는 근본적으로 React를 위해 출시된 것이 아니다. 

Recoil은 React 자체에 내장된 상태 관리 기능인 ContextAPI를 한계를 보완하고자 facebook에서 개발한 라이브러리이다.

 

📌Recoil은 무엇이 다를까?

우선 첫번째, Recoil은 배우기 쉽다. API가 단순하고 이미 hook을 사용하고 있는 사람들에게 익숙할 것이다. Recoil을 시작하기 위해서는 어플리케이션을 RecoilRoot로 감싸고, 데이터를 atom이라는 단위로 선언하여 useState를 Recoil의 useRecoilState로 대체해야 한다.

두번째, 컴포넌트가 사용하는 데이터 조각만 사용할 수 있고, 계산된 selector를 선언할 수 있으며, 비동기 데이터 흐름을 위한 내장 솔루션까지 제공한다.

동적 키로 atom을 만들고, selector에 인자를 보내는 등 모두 간단하게 할 수 있다.

그리고 앞에서 말한 바와 같이 곧 React 동시성 모드에 대한 지원도 될 것이다.

 

Recoil 설치하기 

npm

npm install recoil

 

yarn

yarn add recoil

 

Recoil 주요 개념

Recoil은 2가지의 주요 개념인 atoms(공유상태)과 selectors(순수함수)로 동작하게 된다.

• Atoms : 상태의 단위이며 업데이트와 구독이 가능하다.
• Selectors: atoms나 다른 selectors를 입력으로 받아들이는 순수함수다.

 

ReactRoot

우선 Redux를 사용할 때 루트에 Provider 태그를 감싸주는 것처럼 Recoil은 RecoilRoot를 감싸준다.

import { RecoilRoot } from "recoil";
import Home from "./Components/Home";

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

export default App;

 

 

📌atom과 selector

atom

atom 은 기존의 상태관리 라이브러리에서 쓰이는 store 와 유사한 개념으로, 상태의 단위이다.

atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더된다. 
unique 한 id인 key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유한다. 

 

selector

공식문서의 표현을 빌리자면 selector 는 derived state, 즉 파생된 state를 나타낸다. 원래의 state를 그냥 가져오는 것이 아닌, get 프로퍼티를 통해 state를 가공하여 반환할 수 있다. 

import { atom, selector } from "recoil";
export const countState = atom({
    key: "count",
    default: 0,
  });

export const doubleCountState = selector({
    key: "doubleCount",
    get: ({ get }) => {
      let double = get(countState);
      return double * 2;
    },
  });

 

1. countState atom:
   • atom 함수를 사용하여 전역 상태(atom)를 생성.
   • key: 상태를 식별하는 데 사용되는 고유한 키. 
   • default: 초기 상태 값으로 0이 설정.
2. doubleCountState selector:
   • selector 함수를 사용하여 파생 상태(selector)를 생성.
   • key: 마찬가지로 식별을 위한 고유한 키로 "doubleCount"로 지정.
   • get: 현재 상태 값을 기반으로 파생된 값을 계산하는 함수. 여기서는 countState의 값을 가져와서 두 배로 곱하여 반환.
   • 즉, doubleCount는 항상 countState의 두 배로 계산되어 반환되므로, countState가 변경될 때마다 doubleCount도 변경된다. 이것이 Recoil의 특징 중 하나인 파생된 상태를 편리하게 계산하고 사용하는 예시이다.

 

Recoil 활용하기 

import React from "react";
import "./App.css";
import { countState, doubleCountState } from "./atom";
import { useRecoilState, useRecoilValue, useResetRecoilState } from "recoil";

function Recoil() {

  const [count, setCount] = useRecoilState(countState);
  let countReset = useResetRecoilState(countState);

  const doubleCount = useRecoilValue(doubleCountState);
    //useRecoilValue => state 값만 가져온다.
    //useSetRecoilState => set 함수만 가져온다.

  const plus = () => {
    setCount(count + 1);
  };

  const minus = () => {
    setCount(count - 1);
  };

  return (
    <div className="recoil">
      <h1>Count:{count}</h1>
      <h1>doubleCount:{doubleCount}</h1>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
      <button onClick={countReset}>reset</button>
    </div>
  );
}

export default Recoil;

1. Recoil 상태(atom) 및 선택자(selector) 가져오기:
   • countState와 doubleCountState는 ./atom 파일에서 가져온 Recoil 상태(atom) 및 선택자(selector)이다.
2. Recoil Hooks 사용:
   • useRecoilState: countState의 상태와 상태를 변경하는 setCount 함수를 반환한다.
   • useResetRecoilState: countState를 초기값으로 리셋하는 함수인 countReset을 반환한다.
   • useRecoilValue: doubleCountState의 값을 가져온다.
3. 컴포넌트의 상태 및 이벤트 핸들러:
   • 컴포넌트 내부에서 현재 count 상태와 doubleCount 값을 표시한다.
   • plus 함수는 setCount를 사용하여 count를 1 증가시킨다.
   • minus 함수는 setCount를 사용하여 count를 1 감소시킨다.
   • "reset" 버튼은 countReset 함수를 호출하여 countState를 초기값으로 리셋한다.
4. 컴포넌트 렌더링:
   • JSX를 사용하여 화면에 현재 count와 doubleCount를 표시하고, 버튼을 통해 상태를 변경할 수 있는 간단한 UI를 생성한다.

 

📌useRecoilState

useRecoilState hook은 atom의 state를 get 그리고 set 할 수 있다. 

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

다음과 같이 사용하면, count는 countState 의 value를 가지게 되고(get)

setCount는 count의 값을 변경할 수 있!(set)

 

📌useRecoilValue 와 useSetRecoilValue

 const doubleCount = useRecoilValue(doubleCountState);
 let countReset = useSetRecoilState(countState);
    //useRecoilValue => state 값만 가져온다.
    //useSetRecoilState => set 함수만 가져온다.

 get과 set 만을 사용할 수도 있다. 각각 useRecoilValue 와 useSetRecoilValue hook을 사용한다!

 

 

참고자료 

• https://velog.io/@juno7803/React스러운-상태관리-라이브러리-Recoil
• https://velog.io/@seunghwan7305/recoil-사용법