Provider Pattern (Theme)

#5StructuralEasy

Provider Pattern (Theme)

Provider Pattern

ThemeContext, ThemeProvider, useTheme를 구현해 prop drilling 없이 트리 전체에 테마를 공유하세요.

API

type Theme = 'light' | 'dark';

export function ThemeProvider({ children, initial }: { children: ReactNode; initial?: Theme }): JSX.Element;
export function useTheme(): { theme: Theme; toggle: () => void };

사용 예시

function Display() {
  const { theme, toggle } = useTheme();
  return <button onClick={toggle}>{theme}</button>;
}

<ThemeProvider>
  <Display />
</ThemeProvider>

학습 포인트

createContext + useContext로 데이터를 트리 어디서든 꺼내쓰기
useMemo로 context value 객체를 안정화 (선택)
기본값은 'light', toggle()은 light ↔ dark 전환

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

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

// TODO: ThemeContext를 만드세요 (theme + toggle)

export function ThemeProvider({ children, initial = 'light' }: { children: ReactNode; initial?: Theme }) {
  // TODO: useState로 theme 관리, toggle 함수 구현
  // TODO: Provider로 children을 감싸 value를 내려주세요
  return <>{children}</>;
}

export function useTheme(): { theme: Theme; toggle: () => void } {
  // TODO: useContext로 값을 꺼내 반환하세요
  return { theme: 'light', toggle: () => {} };
}

Sandpack 로드 중…

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

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

// TODO: ThemeContext를 만드세요 (theme + toggle)

export function ThemeProvider({ children, initial = 'light' }: { children: ReactNode; initial?: Theme }) {
  // TODO: useState로 theme 관리, toggle 함수 구현
  // TODO: Provider로 children을 감싸 value를 내려주세요
  return <>{children}</>;
}

export function useTheme(): { theme: Theme; toggle: () => void } {
  // TODO: useContext로 값을 꺼내 반환하세요
  return { theme: 'light', toggle: () => {} };
}