⚛️ 24. TypeScript × React 고급 패턴: 타입 안전한 컴포넌트 설계

// ❌ any로 막아버린 Select 컴포넌트
interface SelectProps {
  options: any[];              // ← any: 타입 정보 사라짐
  onSelect: (v: any) => void; // ← any: 콜백 파라미터 타입 추론 불가
  getLabel?: (option: any) => string;
}
 
function Select({ options, onSelect }: SelectProps) {
  return (
    <ul>
      {options.map((option, i) => (
        <li key={i} onClick={() => onSelect(option)}>
          {option.name} {/* option이 any라 .name이 있는지 TypeScript가 모름 */}
        </li>
      ))}
    </ul>
  );
}
 
// 사용: 타입 에러 없이 모든 게 통과됨
<Select options={[1, 2, 3]} onSelect={v => console.log(v.name)} />
// → 런타임 에러: number에는 .name이 없음! 하지만 TypeScript는 경고 없음

// ❌ 모든 props를 optional로 → 잘못된 조합이 타입 에러 없이 통과
interface ButtonProps {
  variant?: 'default' | 'link' | 'icon';
  href?: string;    // link variant에서만 필요한데 optional
  icon?: ReactNode; // icon variant에서만 필요한데 optional
  onClick?: () => void;
}
 
// 타입 에러 없이 통과하는 잘못된 조합들:
<Button variant="link" />            // href 없는 링크 버튼 → 런타임 에러
<Button variant="icon" href="/home" /> // icon 없는 아이콘 버튼 → 빈 버튼
<Button variant="default" href="/home" onClick={() => {}} /> // href + onClick 동시 → 의미 불명

// ✅ 제네릭으로 타입 흐름 연결 — any 없이 완전한 타입 안전성
interface SelectProps<T> {
  options: T[];
  getLabel: (option: T) => string;   // T에서 표시할 텍스트 추출 방법
  getValue: (option: T) => string;   // T에서 유니크 키 추출 방법
  onSelect: (option: T) => void;     // 선택됐을 때 — T 타입으로 전달됨
  placeholder?: string;
}
 
// <T> 선언: 이 컴포넌트가 사용될 때 T가 결정됨
function Select<T>({ options, getLabel, getValue, onSelect, placeholder }: SelectProps<T>) {
  return (
    <ul>
      {placeholder && <li style={{ color: 'gray' }}>{placeholder}</li>}
      {options.map(option => (
        <li
          key={getValue(option)}         // getValue로 키 추출
          onClick={() => onSelect(option)} // onSelect에 T 타입 전달
        >
          {getLabel(option)}              // getLabel로 표시 텍스트 추출
        </li>
      ))}
    </ul>
  );
}

interface User {
  id: string;
  name: string;
  email: string;
}
 
// T = User 로 자동 추론
<Select<User>
  options={users}
  getLabel={u => u.name}    // u: User 타입으로 자동 추론
  getValue={u => u.id}      // u: User 타입
  onSelect={user => {
    console.log(user.email); // user: User 타입 → .email 안전하게 접근
  }}
/>
 
// T = string 으로 자동 추론
<Select<string>
  options={['영철', '영호', '영숙']}
  getLabel={s => s}          // s: string
  getValue={s => s}
  onSelect={s => console.log(s.toUpperCase())} // string 메서드 안전하게 사용
/>

// ✅ 렌더링 방식을 외부에서 주입받는 제네릭 리스트
interface ListProps<T> {
  items: T[];
  keyExtractor: (item: T) => string;
  renderItem: (item: T, index: number) => React.ReactNode;
  emptyMessage?: string;
}
 
function List<T>({ items, keyExtractor, renderItem, emptyMessage = '항목이 없어요.' }: ListProps<T>) {
  if (items.length === 0) return <p>{emptyMessage}</p>;
 
  return (
    <ul>
      {items.map((item, index) => (
        <li key={keyExtractor(item)}>
          {renderItem(item, index)} {/* 렌더링은 사용하는 쪽이 결정 */}
        </li>
      ))}
    </ul>
  );
}
 
// 사용: Post 타입으로 추론, renderItem 내부에서 post.title 안전하게 접근
<List<Post>
  items={posts}
  keyExtractor={post => post.id}
  renderItem={post => <PostCard title={post.title} author={post.author} />}
  emptyMessage="게시글이 없어요."
/>

// ✅ Discriminated Union으로 variant별 props 타입 분리
type ButtonProps =
  | {
      variant: 'default';
      children: React.ReactNode;
      onClick?: () => void;
      // href, icon 없음 — 이 variant에서는 불필요
    }
  | {
      variant: 'link';
      children: React.ReactNode;
      href: string;          // link variant에서 href는 필수!
      target?: '_blank' | '_self';
    }
  | {
      variant: 'icon';
      icon: React.ReactNode; // icon variant에서 icon은 필수!
      label: string;         // 접근성: 스크린 리더용 레이블 필수
    };
 
function Button(props: ButtonProps) {
  // TypeScript가 각 case에서 props의 타입을 정확히 알고 있음
  switch (props.variant) {
    case 'default':
      return (
        <button onClick={props.onClick}>
          {props.children}
          {/* props.href 접근 → 타입 에러: 'default' variant에는 href 없음 */}
        </button>
      );
    case 'link':
      return (
        <a href={props.href} target={props.target}>
          {props.children}
          {/* props.href는 반드시 존재 — TypeScript가 보장 */}
        </a>
      );
    case 'icon':
      return (
        <button aria-label={props.label}>
          {props.icon}
        </button>
      );
  }
}

// ✅ 올바른 사용
<Button variant="default" onClick={() => {}}>저장</Button>
<Button variant="link" href="/profile">프로필</Button>
<Button variant="icon" icon={<HeartIcon />} label="좋아요" />
 
// ❌ 컴파일 타임 에러 — 런타임 전에 잡힘!
<Button variant="link" />                    // Error: href 없음
<Button variant="link" href="/home" icon={} /> // Error: link에는 icon 없음
<Button variant="icon" />                    // Error: icon, label 없음

type AlertProps =
  | { type: 'info'; message: string }
  | { type: 'success'; message: string; onDismiss?: () => void }
  | { type: 'error'; message: string; onRetry: () => void }; // error엔 onRetry 필수
 
function Alert(props: AlertProps) {
  const icons = { info: 'ℹ️', success: '✅', error: '❌' };
 
  return (
    <div className={`alert alert-${props.type}`}>
      <span>{icons[props.type]}</span>
      <p>{props.message}</p>
      {props.type === 'success' && props.onDismiss && (
        <button onClick={props.onDismiss}>닫기</button>
      )}
      {props.type === 'error' && (
        <button onClick={props.onRetry}>다시 시도</button>
        // props.onRetry: error variant에서 반드시 존재 — TypeScript 보장
      )}
    </div>
  );
}

// ❌ 둘 다 optional → 잘못된 조합도 통과
interface TextFieldProps {
  label?: string;
  htmlFor?: string; // label 있으면 htmlFor도 있어야 하는데 강제 불가
}
 
// ✅ 조건부 Props: 둘 다 있거나, 둘 다 없거나
type TextFieldProps =
  | { label: string; htmlFor: string } // 둘 다 있음
  | { label?: never; htmlFor?: never }; // 둘 다 없음 (never로 상호 배제)
 
// 사용
<TextField label="이메일" htmlFor="email-input" /> // ✅
<TextField />                                       // ✅ (둘 다 없음)
<TextField label="이메일" />                        // ❌ htmlFor 없음 → 에러
<TextField htmlFor="email-input" />                 // ❌ label 없음 → 에러

// "onClick 또는 href 중 하나만" 패턴
type ExclusiveProps =
  | { onClick: () => void; href?: never }  // onClick만
  | { href: string; onClick?: never };     // href만
 
function ActionButton({ onClick, href, children }: ExclusiveProps & { children: React.ReactNode }) {
  if (href) return <a href={href}>{children}</a>;
  return <button onClick={onClick}>{children}</button>;
}
 
// 사용
<ActionButton onClick={() => {}}>클릭</ActionButton>  // ✅
<ActionButton href="/home">이동</ActionButton>         // ✅
<ActionButton onClick={() => {}} href="/home">?</ActionButton> // ❌ 둘 다 → 에러

import { ComponentProps } from 'react';
 
// ✅ input의 모든 네이티브 props를 상속
interface TextFieldProps extends ComponentProps<'input'> {
  label: string;   // 커스텀 prop 추가
  error?: string;  // 커스텀 prop 추가
}
 
function TextField({ label, error, ...inputProps }: TextFieldProps) {
  // ...inputProps 로 type, placeholder, disabled, maxLength 등 모두 전달
  return (
    <div>
      <label>{label}</label>
      <input
        {...inputProps}  // 네이티브 input props 전부 전달
        className={`text-field ${error ? 'error' : ''}`}
      />
      {error && <span className="error-msg">{error}</span>}
    </div>
  );
}
 
// 사용: 네이티브 input 속성 모두 자동완성 지원!
<TextField
  label="이메일"
  type="email"          // input 네이티브 속성
  placeholder="example@email.com" // input 네이티브 속성
  maxLength={100}       // input 네이티브 속성
  required              // input 네이티브 속성
  error="유효한 이메일을 입력해주세요"
/>

// ComponentProps: ref 포함 (함수 컴포넌트에서는 안 씀)
// ComponentPropsWithoutRef: ref 제외 (일반적인 경우 이걸 써)
// ComponentPropsWithRef: ref 포함 (forwardRef 컴포넌트에 씀)
 
interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
  loading?: boolean;
}
// → button의 모든 props (onClick, type, disabled...) 상속 + loading 추가

// ❌ ref가 전달 안 되는 일반 컴포넌트
function TextInput(props: TextFieldProps) {
  return <input {...props} />;
}
 
// 부모에서 ref로 포커스 제어 시도 → 동작 안 함
const inputRef = useRef<HTMLInputElement>(null);
<TextInput ref={inputRef} /> // ❌ Warning: ref를 받지 못함

// ✅ forwardRef<DOM 타입, Props 타입>
const TextInput = forwardRef<HTMLInputElement, TextFieldProps>(
  ({ label, error, ...props }, ref) => { // 두 번째 인자로 ref 받음
    return (
      <div>
        <label>{label}</label>
        <input
          ref={ref}    // ref를 실제 input DOM에 연결
          {...props}
        />
        {error && <span>{error}</span>}
      </div>
    );
  }
);
 
// DevTools에서 컴포넌트 이름 표시를 위해 displayName 설정
TextInput.displayName = 'TextInput';
 
// 사용: 부모에서 input DOM에 직접 접근 가능
function LoginForm() {
  const emailRef = useRef<HTMLInputElement>(null);
 
  const handleSubmit = () => {
    emailRef.current?.focus(); // input DOM에 직접 포커스!
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <TextInput ref={emailRef} label="이메일" type="email" />
    </form>
  );
}

import { ElementType, ComponentPropsWithoutRef } from 'react';
 
// ✅ 다형성 컴포넌트 타입 헬퍼
// C: 렌더링할 HTML 태그 또는 컴포넌트 타입
// OwnProps: 컴포넌트 고유 props
type PolymorphicProps<C extends ElementType, OwnProps = {}> = OwnProps & {
  as?: C; // 어떤 태그로 렌더링할지
} & Omit<
  ComponentPropsWithoutRef<C>, // C 태그의 모든 네이티브 props
  keyof OwnProps | 'as'        // 중복 제거
>;
 
// 실제 사용 예: Button 컴포넌트
type ButtonOwnProps = {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
};
 
function Button<C extends ElementType = 'button'>({
  as,
  variant = 'primary',
  size = 'md',
  children,
  ...rest
}: PolymorphicProps<C, ButtonOwnProps> & { children?: React.ReactNode }) {
  const Component = as || 'button';
  return (
    <Component
      className={`btn btn-${variant} btn-${size}`}
      {...rest}
    >
      {children}
    </Component>
  );
}

// ✅ button 태그로 렌더링 — button 속성 자동완성
<Button onClick={() => {}}>클릭</Button>
<Button type="submit" disabled>제출</Button>
 
// ✅ a 태그로 렌더링 — a 태그 속성이 자동완성됨
<Button as="a" href="/profile" target="_blank">프로필로 이동</Button>
 
// ✅ Next.js Link로 렌더링
<Button as={Link} href="/dashboard">대시보드</Button>
 
// ❌ 타입 에러: button 태그에 href는 없음
<Button href="/home">클릭</Button>
 
// ❌ 타입 에러: a 태그에 type="submit"은 의미 없음 (경고)
<Button as="a" type="submit">?</Button>

function Button({ as: Component = 'button', ...props }) {
  return <Component {...props} />; // 💥 타입 에러
}

function Button<C extends ElementType = 'button'>({
  as,
  ...props
}: { as?: C } & ComponentPropsWithoutRef<C>) {
  const Component = as || 'button'; // ElementType으로 타입 확정
  return <Component {...props} />;
}

type Props = { href: string; onClick?: never } | { onClick: () => void; href?: never };
<Button href="/home" onClick={() => {}} /> // Error: Type 'string' is not assignable to 'never'

// ❌ TSX에서 <T>를 HTML 태그로 파싱할 수 있음
function Select<T>(props: SelectProps<T>) { ... } // 파싱 오류 가능

// 제약 조건 추가로 TSX 파서에게 이게 제네릭임을 알림
function Select<T extends object>(props: SelectProps<T>) { ... }
// 또는 trailing comma
function Select<T,>(props: SelectProps<T>) { ... }

type CardProps =
  | { variant: 'post'; title: string; content: string }
  | { variant: 'user'; name: string; avatar: string }
  | { variant: 'ad'; imageUrl: string; link: string };

// input의 모든 네이티브 props를 상속하는 TextField
interface TextFieldProps extends ________<'input'> {
  label: string;
  error?: string;
}
 
// ref를 전달받는 TextInput 컴포넌트
const TextInput = ________<HTMLInputElement, TextFieldProps>(
  ({ label, ...props }, ref) => <input ref={ref} {...props} />
);