React Academy · 강의

컨텍스트와 사용자 정의 훅 형식 지정하기

기본값이 있는 형식화된 컨텍스트를 만들고 명시적 반환 형식으로 사용자 정의 훅을 작성합니다.

컨텍스트와 사용자 정의 훅 형식 지정하기은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

createContext를 사용한 타입 지정 컨텍스트

컨텍스트 타입과 기본값을 createContext에 전달하십시오. 프로바이더 내부에서만 컨텍스트를 사용해야 한다면 기본값으로 null을 사용하고 가드로 처리하십시오.

interface AuthContextType {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

가드 훅 패턴

컨텍스트를 읽고 프로바이더 외부에서 사용되면 오류를 발생시키는 사용자 지정 훅을 만드십시오. 이렇게 하면 호출 위치마다 null을 확인할 필요가 없습니다.

export function useAuth(): AuthContextType {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

프로바이더 타입 지정

프로바이더 컴포넌트는 자식을 감싸고 컨텍스트 값을 제공합니다. 값 객체의 타입을 명시하여 TypeScript가 컨텍스트 타입과 일치하는지 확인하도록 하십시오.

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (creds: Credentials) => {
    const u = await apiLogin(creds);
    setUser(u);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

기본값이 있는 컨텍스트

합리적인 기본값이 있을 때(예: 테마)는 createContext에 직접 전달하십시오. 그러면 컨텍스트가 null이 되지 않으며 가드 훅도 필요하지 않습니다.

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

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggle: () => {},
});

export const useTheme = () => useContext(ThemeContext);

사용자 지정 훅 반환 값의 타입 지정

사용자 지정 훅의 반환 타입을 명시하거나 TypeScript가 추론하도록 두십시오. 명시적인 타입은 문서 역할을 하며 의도치 않은 구조 변경을 방지합니다.

interface UseCounterReturn {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

function useCounter(initial = 0): UseCounterReturn {
  const [count, setCount] = useState(initial);
  return {
    count,
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
    reset: () => setCount(initial),
  };
}

튜플 반환 타입

useState처럼 한 쌍을 반환하는 훅은 튜플을 사용합니다. 구조 분해 시 타입이 올바르게 추론되도록 as const 또는 명시적인 튜플 타입으로 지정하십시오.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

// Destructuring correctly infers types:
const [isOpen, toggleOpen] = useToggle();

제네릭 사용자 지정 훅

사용자 지정 훅도 제네릭으로 만들 수 있습니다. 제네릭 useLocalStorage 훅은 완전한 타입 안전성을 유지하면서 직렬화 가능한 모든 타입을 저장합니다.

function useLocalStorage<T>(key: string, initialValue: T): [T, (val: T) => void] {
  const [stored, setStored] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch { return initialValue; }
  });

  const setValue = (val: T) => {
    setStored(val);
    localStorage.setItem(key, JSON.stringify(val));
  };

  return [stored, setValue];
}

useReducer 타입 지정

판별 유니언으로 작업 타입을 정의하고 인터페이스로 상태 구조를 정의하십시오. TypeScript가 리듀서에서 유효한 작업 타입만 사용하도록 강제합니다.

interface State { count: number; status: 'idle' | 'loading'; }
type Action =
  | { type: 'INCREMENT' }
  | { type: 'SET_STATUS'; payload: State['status'] };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT': return { ...state, count: state.count + 1 };
    case 'SET_STATUS': return { ...state, status: action.payload };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0, status: 'idle' });

useCallback 및 useMemo 타입 지정

TypeScript는 팩토리 함수에서 useCallback과 useMemo의 타입을 추론합니다. 추론이 실패할 때만 명시적으로 타입을 지정하십시오.

const handleChange = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  },
  [onChange]
);

const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
); // inferred as typeof items

타입을 사용하는 컨텍스트 선택기 패턴

타입이 지정된 선택기 훅은 선택 함수를 받아 필요한 부분만 반환하면서 완전한 타입 추론을 유지합니다.

function useAuthSelector<T>(selector: (ctx: AuthContextType) => T): T {
  const ctx = useAuth();
  return selector(ctx);
}

// Usage — TypeScript infers User | null:
const user = useAuthSelector(ctx => ctx.user);

훅에서 any 사용하지 않기

사용자 지정 훅에서 any를 절대 사용하지 마십시오. 제네릭, 타입 가드와 함께 사용하는 unknown 또는 특정 인터페이스를 사용하여 타입 연결을 유지하십시오.

// Bad:
function useFetch(url: string): { data: any; loading: boolean } { ... }

// Good:
function useFetch<T>(url: string): { data: T | null; loading: boolean } {
  const [data, setData] = useState<T | null>(null);
  // ...
  return { data, loading };
}

빠른 확인

React 컨텍스트의 타입을 지정할 때 가드 훅 패턴의 목적은 무엇인가요?

요약

명시적인 인터페이스와 null을 검사하는 훅으로 컨텍스트의 타입을 지정하십시오. 인터페이스 또는 튜플 타입으로 사용자 지정 훅의 반환 타입을 명시하고, 재사용 가능한 훅에는 제네릭을 사용하며, 잘못된 디스패치를 컴파일 시점에 발견하도록 판별 유니언 작업 타입과 함께 useReducer의 타입을 지정하십시오.

자주 묻는 질문

“컨텍스트와 사용자 정의 훅 형식 지정하기” 강의는 무료인가요?

네 — “컨텍스트와 사용자 정의 훅 형식 지정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“컨텍스트와 사용자 정의 훅 형식 지정하기”에서 뭘 배우나요?

기본값이 있는 형식화된 컨텍스트를 만들고 명시적 반환 형식으로 사용자 정의 훅을 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“컨텍스트와 사용자 정의 훅 형식 지정하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기