타입스크립트와 React

type OrderCardProps = {
  order: Order;
  isSelected?: boolean;            // 선택적 props
  onSelect: (orderId: number) => void;
  children?: React.ReactNode;      // 감싸는 내용
};

function OrderCard({ order, isSelected = false, onSelect, children }: OrderCardProps) {
  return (
    <div className={isSelected ? "card selected" : "card"}>
      <h3>{order.name}</h3>
      <button onClick={() => onSelect(order.id)}>선택</button>
      {children}
    </div>
  );
}

children의 타입은 ReactNode를 씁니다. 문자열, 숫자, 요소, 배열, null을 모두 포함하는 타입입니다.

// 공용 버튼처럼 기존 태그 속성을 그대로 받고 싶을 때
type ButtonProps = React.ComponentProps<"button"> & {
  variant?: "primary" | "secondary";
};

function Button({ variant = "primary", ...rest }: ButtonProps) {
  return <button className={`btn ${variant}`} {...rest} />;
}

// onClick, disabled, type 등을 별도 선언 없이 그대로 쓸 수 있습니다

공용 UI 컴포넌트를 만들 때 유용합니다. 속성을 하나씩 다시 정의하지 않아도 됩니다.

// 초기값만으로 추론되는 경우: 그대로 둡니다
const [keyword, setKeyword] = useState("");
const [count, setCount] = useState(0);

// 나중에 값이 들어오는 경우: 제네릭으로 명시합니다
const [order, setOrder] = useState<Order | null>(null);
const [orders, setOrders] = useState<Order[]>([]);

// 함수를 밖으로 뺄 때만 이벤트 타입을 적습니다
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setKeyword(event.target.value);
};

// null 가능 상태는 사용 전에 확인이 필요합니다
if (!order) return <Empty />;
return <div>{order.name}</div>;

type ListProps<T> = {
  items: T[];
  getKey: (item: T) => string | number;
  renderItem: (item: T) => React.ReactNode;
  emptyText?: string;
};

function List<T>({ items, getKey, renderItem, emptyText = "항목이 없습니다" }: ListProps<T>) {
  if (items.length === 0) return <p className="empty">{emptyText}</p>;

  return (
    <ul>
      {items.map((item) => (
        <li key={getKey(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

// 사용하는 쪽에서 타입이 그대로 유지됩니다
<List
  items={orders}
  getKey={(order) => order.id}        // order가 Order로 추론됩니다
  renderItem={(order) => <OrderRow order={order} />}
/>

Part 2에서 다룬 key 규칙을 컴포넌트가 강제하도록 getKey를 필수로 받았습니다. 타입은 이렇게 규칙을 지키게 만드는 데도 쓸 수 있습니다.

// 느슨함: 오타가 컴파일을 통과합니다
type Order = { status: string };
if (order.status === "PAYED") { }      // 오타지만 오류가 없습니다

// 좁힘: 정해진 값만 허용합니다
type OrderStatus = "PAID" | "SHIPPED" | "CANCELED";
type Order = { status: OrderStatus };
if (order.status === "PAYED") { }      // 컴파일 오류로 잡힙니다

Spring Boot 코스 Part 8에서 enum을 문자열로 저장하기로 한 것과 이어집니다. 서버와 화면이 같은 값 집합을 공유하게 됩니다.