본문으로 건너뛰기

React: 통합 및 상태 관리 (Step 4)

1. 상태 관리의 필요성​

애플리케이션이 커지면 여러 컴포넌트 간에 데이터를 공유해야 하는 상황이 발생합니다. 이를 Prop Drilling(프롭 드릴링) 문제라고 하며, 이를 해결하기 위해 상태 관리 기술이 필요합니다.

2. Context API​

React에 내장된 기능으로, 컴포넌트 트리 전체에 가전역적인 데이터를 전달할 수 있습니다.

// 1. Context 생성
const ThemeContext = createContext('light');

// 2. Provider로 감싸기
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 3. Consumer에서 사용 (useContext 훅)
function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>테마 버튼</button>;
}

3. 외부 상태 관리 라이브러리 (Redux, Zustand)​

복잡한 상태 로직이나 대규모 데이터 흐름이 필요한 경우 외부 라이브러리를 사용합니다.

  • Zustand: 최근 가장 각광받는 가볍고 직관적인 라이브러리입니다.
  • Redux Toolkit: 전통적이고 강력하며 커뮤니티가 매우 큰 표준 도구입니다.

4. 실전 팁: 언제 무엇을 쓸까?​

  1. 단순한 공유: useState + Props
  2. 테마, 유저 정보: Context API
  3. 복잡한 비즈니스 로직: Zustand 또는 Redux
  4. 서버 데이터 상태: React Query