createSafeContext

Provider 내에서 사용되지 않았을 때 에러를 throw하는 안전한 Context를 생성합니다.

Import

import { createSafeContext } from '@liner-engineering/orbit-core';

사용법

기본 사용법

interface ThemeContextValue {
  theme: 'light' | 'dark';
  toggle: () => void;
}

const [useTheme, ThemeProvider] = createSafeContext<ThemeContextValue>('Theme');

// Provider 사용
function App() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  return (
    <ThemeProvider
      value={{
        theme,
        toggle: () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
      }}
    >
      <MyComponent />
    </ThemeProvider>
  );
}

// Consumer 사용
function MyComponent() {
  const { theme, toggle } = useTheme(); // Provider 내부에서만 호출 가능
  return <button onClick={toggle}>{theme}</button>;
}

API

function createSafeContext<T>(contextName?: string): readonly [() => T, React.Provider<T | null>];

파라미터

파라미터	타입	필수	설명
contextName	string	아니오	에러 메시지에 표시될 Context 이름 (디버깅용)

반환값

[useContext, Provider] 튜플:

인덱스	타입	설명
0	() => T	Context 값을 가져오는 hook. Provider 외부에서 호출 시 에러 throw
1	React.Provider<T | null>	Context Provider 컴포넌트

에러 처리

Provider 외부에서 useContext hook을 호출하면 다음 에러가 발생합니다:

Error: Context made by createSafeContext must be used within a Provider.
Context name: Theme

TIP

contextName을 지정하면 디버깅 시 어떤 Context에서 에러가 발생했는지 쉽게 파악할 수 있습니다.

일반 Context와의 비교

// 일반 Context - Provider 외부에서 undefined 반환
const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
const theme = useContext(ThemeContext); // undefined일 수 있음

// createSafeContext - Provider 외부에서 에러 throw
const [useTheme, ThemeProvider] = createSafeContext<ThemeContextValue>('Theme');
const theme = useTheme(); // 항상 ThemeContextValue 타입 보장