2관문. Multiple Providers

관문 2 / 7

AuthContext, ThemeContext, CartContext를 도메인별로 분리하고 조합 Provider로 정리하라.

📖 이론 비급

Multiple Providers: 관심사 분리

모든 전역 상태를 하나의 Provider에 넣으면 컨텍스트가 비대해진다. 관심사별로 분리된 Provider는 독립적으로 테스트하고 교체할 수 있다.

Compose Providers 패턴: providers 배열을 reduce로 중첩하면 Provider Hell을 피할 수 있다. 각 Provider는 자신의 도메인 로직만 담당하며, 루트에서 한 번만 조립하면 된다.

⚔️ 수련 코드

import { createContext, useContext, useState } from 'react';

// TODO: 각 도메인별 Context와 Provider를 구현하라
// 1. AuthContext: { user, login, logout }
// 2. ThemeContext: { theme, toggleTheme }
// 3. CartContext: { items, addItem, removeItem }

// TODO: ComposeProviders 컴포넌트를 만들어 Provider Hell을 제거하라
// function ComposeProviders({ providers, children }) {
//   return providers.reduceRight((child, Provider) => <Provider>{child}</Provider>, children);
// }

export default function App() {
  return (
    // 현재는 중첩 Provider Hell 상태
    <div>
      <p>여기에 ComposeProviders를 적용하라</p>
    </div>
  );
}

Open Sandbox