6관문. Runtime Error Guard

관문 6 / 7

Provider 없이 useContext를 호출했을 때 의미 있는 에러를 던지는 안전한 훅 래퍼를 만들어라.

📖 이론 비급

Runtime Error Guard: 명확한 실패

useContext(ThemeContext)가 undefined를 반환하면 실제 오류는 한참 뒤 다른 곳에서 발생하여 디버깅이 어렵다.

패턴: Context 소비 훅에서 반환값을 체크하고 명확한 에러를 던진다. if (!value) throw new Error('useTheme은 ThemeProvider 내에서 사용해야 합니다'); 실수를 즉시 발견할 수 있어 개발 속도가 빨라진다.

⚔️ 수련 코드

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

const ThemeContext = createContext(undefined);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// TODO: undefined 체크와 의미 있는 에러 메시지를 추가하라
export function useTheme() {
  const context = useContext(ThemeContext);
  // if (!context) throw new Error('...');
  return context;
}

// Provider 없이 사용하면 즉시 에러 발생해야 한다
function ThemedButton() {
  const { theme } = useTheme();
  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>테마 버튼</button>;
}

export default function App() {
  // TODO: ThemeProvider를 제거하고 에러 메시지를 확인하라
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

Open Sandbox