React 전역 상태 관리 - Recoil 기본 사용법

리액트에는 컴포넌트의 메모리인 상태(State)라는 개념이 있다. 

상태는 컴포넌트 내부에서 관리되며, 상태가 선언된 해당 컴포넌트와 자식 컴포넌트에서만 접근이 가능하다.

일반적으로 여러 컴포넌트에서 동일한 상태 정보를 사용해야 하는 경우, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달한다. 

 

그러나 상태가 존재하는 컴포넌트와 상태 정보를 props으로 받아 사용하고자 하는 컴포넌트가 트리 상 멀리 떨어져있다면,  props을 여러 컴포넌트를 거쳐 전달해야 하는 Prop drilling 이 발생한다. 

상태를 여러 컴포넌트에서 공유해야 할 경우, props을 계속해서 전달하는 것은 번거롭고 비효율적일 뿐만 아니라 props의 출처를 찾기 어려워진다.

 

출처 ❘ React

 

따라서 애플리케이션 전역에서 상태에 접근 가능하고 관리할 수 있는 전역 상태 관리 도구를 사용하게 된다. 

리액트 전역 상태 관리 도구의 종류는 다음과 같은 것들이 있다.

 

• React Context API
• Redux
• Recoil
• MobX
• Zustand
• Jotai

이 중 페이스북에서 발표한 React 상태 관리 라이브러리, Recoil의 기본적인 사용 방법에 대해 알아보고자 한다. 

 

---

 

먼저 패키지 설치가 필요하다.

 

npm install recoil

 RecoilRoot

recoil 상태를 사용하는 컴포넌트는 <RecoilRoot>로 감싸져 있어야 한다.

즉, 부모 트리 어딘가에 RecoilRoot가 필요하고 RecoilRoot는 상태를 관리하는 컨텍스트를 제공한다.

공식 문서에서는 루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 위치라고 한다. 

//예시 코드
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
    <BrowserRouter>
      <App />
    </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>
);

 

 Atom

atom은 어떤 컴포넌트에서나 읽고 값을 변경할 수 있는 상태(state)이다.

atom 값이 변경된다면 해당 atom을 구독하고 있는 컴포넌트들이 리렌더링된다. 

[atom 생성 및 정의]

atom() 함수를 사용해 생성한다.

import { atom } from 'recoil';

export const textState = atom({
  key: 'textState', // 상태를 고유하게 식별할 수 있는 키
  default: '',      // 상태의 기본값
});

[atom 사용하기]

useRecoilState() 훅을 이용하여 atom을 읽고 쓸 수 있다.

useRecoilState()는 사용할 atom을 인자로 받아 해당 atom을 참조하는 데이터와 업데이트 하는 함수를 반환한다.

import { useRecoilState } from 'recoil';
import { textState } from './store';
  ...
  const [text, setText] = useRecoilState(textState);
  ...

 

 Selector

selector는 상태를 읽어 파생된 데이터를 구하는 도구이다.

즉, atom을 읽어 필요한 형태의 가공된 데이터를 계산하기 위해 사용한다.

atom의 값이 변경된다면 slector의 값도 변한다.

[selector 정의]

selector() 함수를 사용하여 정의한다.

import { selector } from 'recoil';
import { textState } from './store';

export const charCountState = selector({
  key: 'charCountState',         // 상태를 고유하게 식별할 수 있는 키
  get: ({ get }) => {
    const text = get(textState); // Atom의 현재 값을 읽음
    return text.length;          // 텍스트 길이를 반환
  },
});

• get 속성 : 어떤 상태 값을 읽어와 파생 상태를 계산하여 반환하는 함수.
  get 인자를 전달받아 atom과 다른 slector에 접근할 수 있다.

selector() 함수의 key와 get 속성은 필수이다. 

위와 같이 selector를 정의하면 읽기 전용 slector가 된다.

(* 만약, selector() 함수에 set 속성(option)을 추가로 넣어준다면, 읽기와 쓰기가 가능한 selector가 된다.  )

[selector 사용하기]

useRecoilValue() 훅을 이용하여 selector를 읽어올 수 있다.

import { useRecoilValue } from 'recoil';
import { charCountState } from './store';
	...
  const count = useRecoilValue(charCountState);
	...