createContext

React Context를 정의할 때 반복되는 코드를 줄여주는 헬퍼 함수입니다.

Interface

function createContext<ContextValue extends object | null>(
  rootComponentName: string,
  defaultContext?: ContextValue,
): [
  Provider: (
    props: ContextValue & { children: React.ReactNode },
  ) => JSX.Element,
  useContext: (consumerName: string) => ContextValue,
];

Parameters

이름	타입	설명	필수
rootComponentName	string	컨텍스트를 제공하는 컴포넌트의 이름	O
defaultContext	ContextValue	컨텍스트의 기본값	X

Return

[Provider, useContext] 튜플을 반환합니다.

이름	타입	설명
Provider	(props: ContextValue & { children: React.ReactNode }) => JSX.Element	컨텍스트를 제공하는 컴포넌트
useContext	(consumerName: string) => ContextValue	컨텍스트를 사용하는 훅

Usage

import { createContext } from '@teamsparta/react';

const [ThemeProvider, useTheme] = createContext<{ theme: string }>('Theme');

function ThemeToggle() {
  const { theme } = useTheme('ThemeToggle');
  return <div>현재 테마: {theme}</div>;
}

function App() {
  return (
    <ThemeProvider theme="dark">
      <ThemeToggle />
    </ThemeProvider>
  );
}

Example

기본 사용법

const [UserProvider, useUser] = createContext<{ name: string; age: number }>(
  'User',
);

function UserProfile() {
  const { name, age } = useUser('UserProfile');
  return (
    <div>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </div>
  );
}

function App() {
  return (
    <UserProvider name="홍길동" age={25}>
      <UserProfile />
    </UserProvider>
  );
}