React

[React] Recoil로 전역 상태관리하기 🌐

프론트 개발자 김현중 2025. 1. 27. 22:47
728x90

필자는 여러 프로젝트를 진행하면서 Props Drilling 문제를 항상 마주하였고 정말 귀찮음을 느꼈던것 같다. 그러다 Recoil을 접했는데 신세계? 였던것 같다,, 그렇기에 내가 사랑하는 Recoil에 대해 개념정리를 해보고자 한다!!!

 

Recoil이란??

Recoil은 React 애플리케이션을 위한 상태 관리 라이브러리이다.

Redux나 MobX와 같은 다른 상태 관리 도구들과 비교했을 때, React에 최적화되어 있어 학습하기 쉽고 사용법이 직관적이다.

React의 내부 상태 관리 방식과 유사한 접근법을 사용하기 때문에, React 개발자들이 쉽게 적응할 수 있을거라고 개인적으로 생각이 든다.

 

더 깊게 들어가기전에 Props Drilling 문제가 궁금할수도 있따고 생각한다.

Props Drilling 문제란?
React에서 상태를 하위 컴포넌트에 전달하기 위해 여러 단계의 컴포넌트를 거쳐야 하는 현상을 Props Drilling이라고 한다.

따라서 단점은 -> 코드의 유지보수를 어렵게 만들고, 컴포넌트 간의 결함도를 높이는 문제를 발생시킨다.

Recoil 설치하기!

Recoil을 사용하기 위하여 먼저 npm이나 yarn을 사용하여 설치해아한다.

npm install recoil
# 또는
yarn add recoil

설치 후, 애플리케이션의 최상위 컴포넌트에 RecoilRoot를 설정해야 한다.

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <div>
        <h1>My Application</h1>
        <OtherComponents />
      </div>
    </RecoilRoot>
  );
}

RecoilRoot는 Recoil의 상태를 저장하고 관리하는 컨테이너 역할을 한다. (React의 Context API와 유사한 방식으로 동작)

Recoil의 주요 개념 알아보기

1. Atom

Atom은 Recoil의 가장 기본적인 상태 단위이다.

React의 useState와 유사하지만, 전역적으로 관리되고 어떤 컴포넌트에서도 접근이 가능하다는 장점이 있다!

import { atom } from 'recoil';

const countState = atom({
  key: 'countState', // 고유한 ID (필수)
  default: 0, // 기본값
});

이 코드에서 key는 atom을 식별하는 고유한 문자열이어야 한다. (default는 초기값을 설정)

 

2. Selector

Selector는 atom의 상태를 기반으로 파생된 상태를 만들 수 있게 해준다고 보면 된다.

예를 들어, 숫자를 2배로 만들거나, 필터링을 하는 등의 작업을 수행할 수 있다!

import { selector } from 'recoil';

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

이 selector는 countState의 값을 가져와서 2배로 만든 새로운 값을 반환한다.

*get 함수는 다른 atom이나 selector의 값을 참조할 수 있다.*

728x90