useSafeContext

React Context에 안전하게 접근하기 위한 커스텀 훅입니다.

Context에 기본값이 없다면(null/undefined) Provider 내부에서 사용되지 않았을 때 에러를 발생시킵니다. Context에 기본값이 있다면 Provider 내부에서 사용되지 않았을 때 에러가 발생하지 않고 기본값을 반환합니다.

에러가 발생하지 않으면 안전하게 접근했기 때문에 NonNullable한 Context 값을 반환합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

function useSafeContext<T>(context: Context<T>): NonNullable<T>

Usage

typescript

import { useSafeContext } from '@modern-kit/react'
import { createContext } from 'react'

const ThemeContext = createContext<{ theme: string } | null>(null);
ThemeContext.displayName = 'ThemeContext';

function MyComponent() {
  // 안전하게 접근했기 때문에 NonNullable한 Context 값을 반환합니다.
  // context: { theme: 'dark' }
  const context = useSafeContext(ThemeContext);
  return <div>현재 테마: {context.theme}</div>;
}

<ThemeContext.Provider value={{ theme: 'dark' }}>
  <MyComponent />
</ThemeContext.Provider>

Example

현재 테마: dark