Provider Pattern (ThemeProvider + useTheme)

#31StructuralEasy

Provider Pattern (ThemeProvider + useTheme)

Provider Pattern

ThemeProvider 와 useTheme() 커스텀 훅을 구현해 prop drilling 없이 테마를 공유하세요.

API

type Theme = 'light' | 'dark';

export function ThemeProvider(props: {
  children: React.ReactNode;
  defaultTheme?: Theme; // 기본 'light'
}): JSX.Element;

export function useTheme(): {
  theme: Theme;
  toggle: () => void;
  setTheme: (next: Theme) => void;
};

동작

useTheme() 은 가장 가까운 ThemeProvider 의 값을 반환.
toggle() 은 light ↔ dark 전환.
setTheme(next) 로 직접 값 지정 가능.
ThemeProvider 바깥에서 useTheme() 호출 시 에러를 throw.

학습 포인트

createContext + useContext 로 트리 전역 데이터 공유
커스텀 훅으로 컨텍스트 소비 로직 캡슐화
잘못된 사용을 컴파일/런타임에서 강하게 차단

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

export type Theme = 'light' | 'dark';

type ThemeContextValue = {
  theme: Theme;
  toggle: () => void;
  setTheme: (next: Theme) => void;
};

// TODO: createContext로 ThemeContext 만들기 (기본값은 null이나 undefined)

export function ThemeProvider({
  children,
  defaultTheme = 'light',
}: {
  children: ReactNode;
  defaultTheme?: Theme;
}) {
  // TODO: useState로 theme 상태, toggle/setTheme 구현
  // TODO: Provider로 children 감싸기
  return <>{children}</>;
}

export function useTheme(): ThemeContextValue {
  // TODO: useContext로 값을 꺼내고, Provider 바깥이면 throw
  return { theme: 'light', toggle: () => {}, setTheme: () => {} };
}

Open Sandbox

Sandpack 로드 중…

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

export type Theme = 'light' | 'dark';

type ThemeContextValue = {
  theme: Theme;
  toggle: () => void;
  setTheme: (next: Theme) => void;
};

// TODO: createContext로 ThemeContext 만들기 (기본값은 null이나 undefined)

export function ThemeProvider({
  children,
  defaultTheme = 'light',
}: {
  children: ReactNode;
  defaultTheme?: Theme;
}) {
  // TODO: useState로 theme 상태, toggle/setTheme 구현
  // TODO: Provider로 children 감싸기
  return <>{children}</>;
}

export function useTheme(): ThemeContextValue {
  // TODO: useContext로 값을 꺼내고, Provider 바깥이면 throw
  return { theme: 'light', toggle: () => {}, setTheme: () => {} };
}

Open Sandbox