(React) 전역 상태 관리

전역 상태 관리 (Context API 중심)

로컬 상태는 컴포넌트 내부에서만 데이터를 다룰 때는 편리하지만 ~~

앱 규모가 커지고 여러 컴포넌트가 같은 데이터를 공유해야 할 때는 한계가 있을 때가 있다고 함

이럴 때 필요한 것이 바로 전역 상태 관리(Global State Management)

 

전역 상태 관리는 여러 컴포넌트에서 공통으로 사용하는 상태를 하나의 중앙 저장소에서 관리하는 방식

예를 들어

• 로그인 상태
• 장바구니 목록
• 테마(다크/라이트) 설정
• 사용자 정보

왜 전역 상태가 필요할까?

초기에는 props로 데이터를 전달할 수 있어. 하지만 컴포넌트가 깊어질수록

props를 계속 넘겨줘야 하는 불편함(prop drilling)이 생김!

• 예전에 다른 컴포넌트에 유저 정보랑 페이지 정보등을 넘기도록 코드를 짠적이 있었음
• 그 때 보낼때 마다 너무 많은 props를 넘겨 불편하고 헷갈리는 경우가 있었음

이럴 땐 전역 상태를 쓰면 원하는 컴포넌트에서 직접 상태를 가져올 수 있어서 구조가 훨씬 깔끔해짐

---

전역 상태 관리 도구 종류

• Context API (React 기본 제공)
• Redux (전통적인 상태 관리 도구)
• Recoil (React 친화적인 새로운 도구)
• Zustand (가볍고 코드가 간결한 상태 관리 라이브러리)

이번 글에서는 가장 기본적인 도구인 Context API를 먼저 알아봅시당

---

Context API 예제

// ThemeContext.js
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// App.js
import { ThemeProvider } from './ThemeContext';
import Home from './Home';

function App() {
  return (
    <ThemeProvider>
      <Home />
    </ThemeProvider>
  );
}

// Home.js
import { useTheme } from './ThemeContext';

function Home() {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <p>현재 테마: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        테마 변경
      </button>
    </div>
  );
}

 

Context API는 마치 상위 컴포넌트에서 useState로 선언한 변수를 하위 컴포넌트들이 공통으로 공유해서 사용할 수 있게 해주는 기능이라고 보면 이해가 쉬울것 같음!

 

Context API의 장점

• React 기본 기능이라 별도 설치 없이 사용 가능
• 간단한 전역 상태를 공유하기 좋음
• Hook으로 커스터마이징 가능 (useContext)

단점 및 한계

• 상태가 복잡해질수록 관리가 어려워짐
• Provider 중첩이 많아질 수 있음
• 성능 이슈 (불필요한 리렌더링) 발생 가능