React 19 Hook: useState, useReducer, Custom Hook

"Hook 이 React 자체로 타입 붙음. 너의 일은 옳은 초기 값 주는 거."

useState 타입

useState 가 초기 값에서 state 타입 추론. useState(0) 가 `[number, Dispatch>]`. useState('hi') 가 `[string, ...]`. 초기 값이 너무 좁거나 (null, undefined) union 원하면 명시 generic 전달: useState<User | null>(null).

useReducer 타입

useReducer 의 타입이 reducer signature 에서 옴. function reducer(state: State, action: Action): State { ... }. useReducer(reducer, initialState) 가 reducer 에서 state 와 action 타입 둘 다 추론. `Action` 의 discriminated union 이 reducer 안에서 exhaustive case 체크 줘.

Custom hook

Custom hook 이 `use` 로 시작하는 이름의 함수, 다른 hook 호출. 다른 어떤 함수처럼 타입 붙여. function useUser(id: number): { user: User | null; loading: boolean }. State+setter 쌍엔 tuple 반환: function useCounter(initial: number): [number, () => void].

React 의 타입이 광범위하고 정확. Hook 이 타입 잃으면 아마 어딘가 `any` 전달했어. 어디 추적해서 그거 고치면 나머지 통해 타입이 옳게 흐름.

Code

Hook — useState, useReducer, custom·tsx

import { useState, useReducer, useEffect } from 'react';

// useState — inference 가 흔한 case 처리.
function Counter() {
  const [count, setCount] = useState(0);          // number
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// useState — nullable/union 초기에 명시 generic.
function UserProfile() {
  const [user, setUser] = useState<User | null>(null);
  // ...
  return null;
}

// useReducer — action 용 discriminated union.
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; value: number };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'set': return action.value;
  }
}

function CounterAdvanced() {
  const [count, dispatch] = useReducer(reducer, 0);
  return (
    <button onClick={() => dispatch({ type: 'increment' })}>{count}</button>
  );
}

// Custom hook.
function useDelayed<T>(value: T, ms: number): T {
  const [delayed, setDelayed] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDelayed(value), ms);
    return () => clearTimeout(id);
  }, [value, ms]);
  return delayed;
}

Exercise

Custom useToggle(initial: boolean): [boolean, () => void] hook 써. 그다음 'show/hide details' toggle 에 그거 쓰는 component 써. Destructuring 이 옳은 타입 주는지 확인.

Hint

안에서 useState<boolean>(initial) 와 return [value, () => setValue(v => !v)]. Functional setter 패턴이 stale-state 버그 없이 toggle 처리.

React 19 Hook: useState, useReducer, Custom Hook

useState 타입

useReducer 타입

Custom hook

Code

External links

Exercise

Progress

댓글 0