TypeScript에서 제네릭 컴포넌트와 유틸리티 타입을 활용하면 더 유연하고 안전한 컴포넌트를 만들 수 있어.

Partial, Pick, Omit, keyof, typeof, ReturnType, Parameters 같은 도구들도 매우 중요해.

📘 예제 91: 제네릭 props 컴포넌트

type ListProps<T> = {
  items: T[];
  render: (item: T) => React.ReactNode;
};

const GenericList = <T,>({ items, render }: ListProps<T>) => {
  return <ul>{items.map((item, i) => <li key={i}>{render(item)}</li>)}</ul>;
};

// 사용 예
<GenericList
  items={['React', 'TypeScript']}
  render={(item) => <strong>{item}</strong>}
/>

✅ <T,>에서 ,는 JSX로 인식되는 걸 방지해줘.

어떤 타입이든 리스트를 재사용할 수 있는 범용 컴포넌트를 만들 수 있어.

📘 예제 92: React.FC 제네릭 형태

type BoxProps<T> = {
  value: T;
};

const Box: React.FC<BoxProps<string>> = ({ value }) => {
  return <div>{value}</div>;
};

✅ React.FC에도 제네릭 타입을 지정할 수 있어.

하지만 children 자동 포함 등 단점도 있어서 일부는 사용을 지양해.

📘 예제 93: Partial, Pick, Omit 사용 예

type User = {
  id: number;
  name: string;
  email: string;
};

type UserOptional = Partial<User>; // 모든 속성이 optional
type UserIdOnly = Pick<User, 'id'>; // id만 선택
type UserWithoutEmail = Omit<User, 'email'>; // email 제외

✅ Partial<T>: 전부 선택 속성으로

Pick<T, K>: 원하는 키만

Omit<T, K>: 특정 키만 제외

매우 자주 쓰이는 타입 변형 도구들이야.

📘 예제 94: keyof와 typeof 응용

const COLORS = {
  primary: '#00f',
  secondary: '#0f0',
  danger: '#f00',
};

type ColorKey = keyof typeof COLORS; // 'primary' | 'secondary' | 'danger'

const ColorBox = ({ color }: { color: ColorKey }) => {
  return <div style={{ color: COLORS[color] }}>색상 박스</div>;
};

✅ typeof 객체 → 객체의 타입을 가져오고

keyof → 그 키값을 유니언으로 추출 가능

이렇게 하면 enum-like 사용이 가능해져.

📘 예제 95: ReturnType, Parameters 활용