[React] Recoil을 이용한 상태 관리

정세은·2023년 8월 16일

React

react

목록 보기

8/8

✔️ 개요

호환성 및 단순함을 이유로 외부의 글로벌 상태 관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을사용하는 것이 가장 좋다.
이번 포스팅에서는 React의 Recoil에 대하여 알아보려고 한다.

✔️ Recoil이란?

페이스북에서 개발한 React를 위한 상태 관리 라이브러리이다.
Recoil은 다른 상태 관리 라이브러리와는 달리, 상태를 atom 단위로 관리한다.
(atom이란, 하나의 작은 단위로 상태를 분할하는 것을 의미하고, 이는 상태를 조각화하여 각 컴포넌트의 필요한 부분만 업데이트 할 수 있도록 도와준다.)

✔️ Recoil의 주요 개념

1️⃣ Atoms
애플리케이션의 상태를 나타내는 작은 단위이다.
각각의 Atom은 고유한 식별자와 기본값을 가지며, 컴포넌트에서 읽거나 쓸 수 있는 상태이다.

2️⃣ Selectors
Atoms를 기반으로 파생된 상태를 계산하는 함수이다.
Selector는 다른 상태나 Selector의 값을 조합해서 새로운 값을 계산하거나 반환할 수 있다.

3️⃣ RecoilRoot
Recoil 상태를 사용할 수 있는 컴포넌트 루트이다.
이를 통해서 애플리케이션 전체에서 Recoil 상태를 사용하고 업데이트 할 수 있다.

✔️ Recoil vs Redux

Recoil과 Redux는 모두 상태 관리를 위한 라이브러리이다.

Recoil: 상태를 작은 단위로 쪼개고, 각 컴포넌트의 필요에 따라 독립적으로 업데이트 할 수 있는 atom 중심의 라이브러리이다. 컴포넌트 간의 상태 공유와 업데이트가 더 자연스럽게 이루어진다.

Redux: 단일 중앙 상태 저장소를 가지고 있기 때문에 모든 상태는 단일 객체로 저장되고,
상태를 변경하기 위해 action을 dispatch하고 reducer를 통해 상태를 업데이트 해야 한다.

Recoil은 컴포넌트 수준에서 상태를 관리하고 공유하기에 더 편리하며,
Redux는 애플리케이션 전체의 상태 관리에 더 적합한 구조를 가지고 있다.

✔️ Recoil 예시

😀 Recoil 설치

npm install recoil

😀 RecoilRoot 추가

import React from 'react';
import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

export default Root;

먼저, Recoil 상태를 사용하기 위해 애플리케이션의 Root 컴포넌트에서 RecoilRoot를 추가한다.

😀 Atom 정의하기

import { atom } from 'recoil';

export const countState = atom({
 key: 'countState', // 고유한 식별자
 default: 0,        // 기본값
});

atom은 상태의 최소 단위이다. 간단한 숫자를 저장하는 atom을 정의해보자.

😀 Atom 사용하기

import React from 'react';
import { useRecoilState } from 'recoil';
import { countState } from './atoms';

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

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

 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={increment}>Increment</button>
   </div>
 );
};

export default Counter;

위의 예시에서 countState Atom의 상태를 useRecoilState hook을 통해 읽어오고,
setCount 함수를 사용하여 상태를 업데이트 한다.

😀 Selector 정의하기

import { selector } from 'recoil';
import { countState } from './atoms';

export const doubledCountSelector = selector({
 key: 'doubledCountSelector',
 get: ({ get }) => {
   const count = get(countState);
   return count * 2;
 },
});

doubledCountSelector는 countState atom의 값을 가져와 두 배로 계산한 값을 반환한다.

😀 Selector 사용하기

import React from 'react';
import { useRecoilValue } from 'recoil';
import { doubledCountSelector } from './selectors';

const DoubledCounter = () => {
 const doubledCount = useRecoilValue(doubledCountSelector);

 return (
   <div>
     <p>Doubled Count: {doubledCount}</p>
   </div>
 );
};

export default DoubledCounter;