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

단순한 상태 전달은 props로도 충분히 해결할 수 있지만,
컴포넌트의 깊이가 깊어질수록 상태를 전달하는 구조가 점점 복잡해진다.

특히 여러 컴포넌트에서 동일한 상태를 공유해야 하는 경우,
props drilling 방식은 유지보수와 가독성 측면에서 한계가 있다.

기존의 Redux의 경우, action이나 reducer 등 구조가 복잡하여 단순한 상태 관리에도 코드가 길어지고 빠른 구현이 어렵다는 문제가 발생한다.

이러한 문제를 해결하기 위해 오늘은 Redux를 사용하여 전역 상태 관리를 해보고자 한다.

Recoil 설치

npm i recoil

RecoilRoot 설정

Recoil을 사용하기 위해 최상위 컴포넌트를 RecoilRoot로 감싸준다.

// main.jsx

import { RecoilRoot } from "recoil";
import App from "./App.jsx";

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

export default Root;

atom 정의

전역 상태를 정의하는 기본 단위이다.

// locationAtom.jsx

import { atom } from "recoil";

export const locationState = atom({
  key: "locationState",
  default: ""
});

export const initialState = atom({
  key: "initialState",
  default: ""
});

selector 정의

여러 상태를 조합하거나 가공할 때 사용한다.

// locationSelector.jsx

import { selector } from "recoil";
import { initialState, stationState } from "../atoms/locationAtom";

export const initialAndStationVisible = selector({
  key: "initialAndStationVisible",
  get: ({ get }) => {
    const initial = get(initialState);
    const station = get(stationState);

    if (station) {
      return station;
    } else {
      return initial;
    }
  }
});

상태 변경 (useRecoilState)

// LocationPage.jsx

import { useRecoilState } from "recoil";
import { locationState } from "../recoil/atoms/locationState";

function LocationPage() {
  const [isLocationState, setIsLocationState] = useRecoilState(locationState);

  const handleLocationState = (locationName) => {
    setIsLocationState(locationName);
    console.log(locationName);
  };

  return (
    <RectangleButton>
      <Text onClick={() => handleLocationState("서울/수도권")}>
        서울/수도권
      </Text>
    </RectangleButton>
  );
}

export default LocationPage;

상태 조회 (useRecoilValue)

// LocationContent.jsx

import { useRecoilValue } from "recoil";
import { initialAndStationVisible } from "../../recoil/selectors/locationSelector";

function LocationContent() {
  const initialAndStationState = useRecoilValue(initialAndStationVisible);

  return (
    <TitleButton>
      <TitleText>{initialAndStationState}</TitleText>
    </TitleButton>
  );
}

export default LocationContent;

단순한 전역 상태 관리가 필요한 상황에서는 Redux보다 Recoil이 더 빠르고 효율적인 선택일 수 있다.

특히 초기 개발 단계이거나 구조가 복잡하지 않은 프로젝트에서는
Recoil을 사용하면 개발 속도와 가독성 측면에서 큰 도움이 될 수 있으니, 프로젝트의 규모와 상황에 따라 적절한 상태 관리 라이브러리를 선택하는 것이 중요하다.

Reference

[React] Recoil 사용법 (RecoilRoot, atom, selector)