useState는 가장 자주 사용하는 Hook 중 하나야.

TypeScript와 함께 사용할 때는 상태의 타입을 명시적으로 지정하거나 초기값으로부터 추론하게 할 수 있어.

📘 예제 16: 기본 값 상태 관리

import { useState } from 'react';

const Counter = () => {
  // number 타입으로 추론됨
  const [count, setCount] = useState(0);

  const increase = () => setCount(count + 1);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increase}>증가</button>
    </div>
  );
};

✅ 초기값이 숫자라면 타입을 명시하지 않아도 number로 자동 추론돼. 대부분의 경우 타입 생략 가능.

📘 예제 17: 객체 상태 타입 정의

type User = {
  name: string;
  age: number;
};

const UserProfile = () => {
  const [user, setUser] = useState<User>({
    name: '박하',
    age: 30,
  });

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.age}살</p>
    </div>
  );
};

✅ useState<User>()처럼 제네릭을 사용해서 상태의 객체 구조를 타입으로 명확히 정의해줄 수 있어.

📘 예제 18: 배열 상태의 타입

const Tags = () => {
  const [tags, setTags] = useState<string[]>(['React', 'TypeScript']);

  return (
    <ul>
      {tags.map((tag, idx) => (
        <li key={idx}>#{tag}</li>
      ))}
    </ul>
  );
};

✅ 배열은 string[], number[], User[] 등으로 명시. 타입이 혼합된 배열은 유니언((string | number)[])으로도 가능.

📘 예제 19: useState 제네릭 사용

function useToggle(initial: boolean) {
  const [value, setValue] = useState<boolean>(initial);

  const toggle = () => setValue((prev) => !prev);

  return [value, toggle] as const;
}

// 사용
const [isOpen, toggleOpen] = useToggle(false);

✅ 함수형 컴포넌트 외부에서도 useState<T>() 제네릭을 통해 상태 타입을 지정 가능. 커스텀 훅에도 유용.