React 고급 기술 익히기 - 2편: 상태 관리의 최적화와 라이브러리 비교

안녕하세요! "React 고급 기술 익히기" 시리즈의 두 번째 시간입니다. 지난 1편에서는 React 렌더링 최적화 기법에 대해 다뤘는데요, 오늘은 React 애플리케이션에서 중요한 또 하나의 주제, 상태 관리의 최적화와 상태 관리 라이브러리에 대해 이야기해보겠습니다.

---

1. React 상태 관리의 기본 이해

React는 컴포넌트 단위로 상태를 관리하며, useState, useReducer, 그리고 Context API 같은 기본 도구를 제공합니다. 하지만 애플리케이션이 커지고 상태가 여러 컴포넌트에 걸쳐 공유되어야 할 경우, 상태 관리가 복잡해지기 때문에 최적화 전략과 적절한 상태 관리 도구를 사용하는 것이 중요합니다.

---

2. 상태 관리 최적화 기본 전략

(1) 상태 최소화

• 상태(state)는 꼭 필요한 데이터만 관리해야 합니다.
• 파생 데이터(derived state)는 직접 계산하거나 함수로 처리하고, 상태로 저장하지 않도록 합니다.

예제: 파생 상태 제거하기

const [items, setItems] = useState([1, 2, 3, 4]);
const totalItems = items.length; // 이 값은 상태로 저장할 필요가 없음

---

(2) 상태의 올바른 위치 선정 (Lifting State Up)

• 상태는 해당 상태를 가장 필요로 하는 공통 부모 컴포넌트에 두는 것이 좋습니다.
• 불필요하게 상태를 상위로 올리거나 과도한 props 전달은 피해야 합니다.

---

(3) Context API 사용 시 주의

Context API는 전역 상태를 공유하는 데 유용하지만, Context 값이 변경될 때 Context를 구독하는 모든 컴포넌트가 다시 렌더링됩니다. 이를 최적화하려면 상태를 여러 Context로 분리하거나 메모이제이션을 활용하세요.

예제: Context 분리

 

const ThemeContext = React.createContext();
const UserContext = React.createContext();

---

3. 상태 관리 라이브러리의 필요성

React의 기본 상태 관리 도구는 작은 프로젝트에서는 충분히 유용하지만, 다음과 같은 문제가 발생하면 추가 라이브러리가 필요합니다:

• 상태가 여러 컴포넌트에 걸쳐 분산됨.
• 상태 업데이트가 비효율적으로 이루어짐.
• 데이터의 중앙 집중화가 필요함.

---

4. 상태 관리 라이브러리 비교

(1) Redux

Redux는 가장 널리 알려진 상태 관리 라이브러리입니다. 상태를 중앙 저장소(store)에 보관하며, reducer와 action을 사용해 상태를 업데이트합니다.

장점:

• 상태의 흐름이 명확하고 예측 가능.
• 강력한 디버깅 도구(Redux DevTools) 제공.
• 대규모 애플리케이션에 적합.

단점:

• 보일러플레이트 코드가 많아 초기 설정이 복잡할 수 있음.

예제: Redux 설정

 

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

---

(2) Zustand

Zustand는 가벼운 상태 관리 라이브러리로, 간결한 API와 빠른 성능이 특징입니다.

장점:

• 보일러플레이트 코드가 거의 없음.
• 간단한 프로젝트에서 사용하기 적합.

단점:

• 대규모 상태 관리에는 상대적으로 덜 적합.

예제: Zustand 사용

 

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

export default function Counter() {
  const { count, increment } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

---

(3) Recoil

Recoil은 Facebook에서 개발한 상태 관리 라이브러리로, React와 깊이 통합되어 있습니다. 개별 상태(atom)를 선언하고 이를 구독하도록 컴포넌트를 설정할 수 있습니다.

장점:

• 선언적이고 React와의 통합이 뛰어남.
• 상태를 독립적으로 관리 가능.

단점:

• React 외의 환경에서는 사용할 수 없음.

예제: Recoil 사용

 

import { atom, useRecoilState, RecoilRoot } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

---

(4) MobX

MobX는 상태를 반응형으로 관리하며, 코드가 간결하고 동적으로 상태를 관리할 수 있습니다.

장점:

• 코드가 직관적이고 간결.
• 반응형 상태 관리로 자동 렌더링.

단점:

• 상태가 커질수록 구조화가 어려울 수 있음.

예제: MobX 사용

 

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }
}

const counterStore = new CounterStore();

export default counterStore;

---

5. 상태 관리 도구 선택 가이드

라이브러리프로젝트 규모특징

 

 

Redux	대규모	복잡한 상태 관리와 예측 가능한 상태 흐름.
Zustand	소규모	간단하고 가벼운 상태 관리.
Recoil	중소규모	React와의 높은 통합성.
MobX	중소규모	반응형 상태 관리로 코드가 직관적.
Context API	소규모	기본적으로 제공되는 상태 관리 도구로, 작은 규모의 프로젝트에서 유용.

---

6. 상태 관리 최적화 체크리스트

1. 상태를 최소화하고 필요한 데이터만 관리.
2. 상태의 위치를 적절히 설정.
3. Context API 사용 시 불필요한 렌더링 방지.
4. 프로젝트 규모와 요구사항에 맞는 상태 관리 라이브러리를 선택.

---

결론

React에서의 상태 관리는 애플리케이션의 규모와 복잡도에 따라 적절히 설계해야 합니다. React가 제공하는 기본 도구로도 많은 상황을 해결할 수 있지만, 프로젝트가 커질수록 상태 관리 라이브러리의 사용을 고려해보세요.

다음 3편에서는 React의 컴포넌트 구조 설계와 컴포넌트 재사용성을 극대화하는 방법에 대해 이야기하겠습니다. 😊