React 19 + TS: Component 와 Props

"React component 가 props 받고 JSX 반환하는 함수. TypeScript 가 그 contract 명시적으로 만듦."

함수 component 타입 붙이기

Modern 관례가 `Props` 타입 선언하고 함수 parameter 로 사용. function Button(props: ButtonProps): React.ReactNode { ... }. Return 타입이 보통 `React.ReactNode` (또는 옛 React 타입의 `JSX.Element`) 로 추론 — 명시 annotate 가 optional 이지만 문서화에 도움.

React.FC<Props> 안 써 — 옛 패턴, 암묵적으로 `children` 추가, 역사적으로 default 값에 이슈. 직접 Props 접근이 더 깨끗하고 모든 modern 스타일 가이드 권장.

Children 타입 붙이기

Component 가 children 받으면 Props 에 포함: interface ButtonProps { children: React.ReactNode; onClick?: () => void }. React.ReactNode 가 React 가 render 할 수 있는 어떤 것이든 cover — string, number, element, fragment, 배열, null. 특정 종류의 children (예: '함수 children 만') 엔 더 좁은 타입 써.

Event handler 타입 붙이기

React event handler 가 특정 타입 가짐: onClick: (e: React.MouseEvent<HTMLButtonElement>) => void. Generic parameter 가 element. Inline handler 가 보통 inference 가 일 하게 해 — <button onClick={(e) => ...}> 가 JSX context 에서 `e` 옳게 추론.

React + TS 가 주로 Props 와 event handler 깨끗하게 타입 붙이는 거. 나머지가 그냥 타입 있는 JavaScript.

Code

Props, children, event handler 가진 component·tsx

import { useState } from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  children?: React.ReactNode;
}

export function Button({ label, onClick, variant = 'primary', disabled, children }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled} className={`btn btn-${variant}`}>
      {label}
      {children}
    </button>
  );
}

// Event handler — inline 추론.
function Form() {
  const [value, setValue] = useState('');
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}    // e: React.ChangeEvent<HTMLInputElement>
    />
  );
}

Exercise

title: string, optional description?: string, child action button 용 actions?: React.ReactNode 가진 Card component 써. Parent component 에서 사용, actions 를 JSX children 으로 전달. Component 정의와 consumer 둘 다 타입 작동 확인.

Hint

interface CardProps { title: string; description?: string; actions?: React.ReactNode }. 그다음 <Card title="..." actions={<Button ... />} />.

React 19 + TS: Component 와 Props

함수 component 타입 붙이기

Children 타입 붙이기

Event handler 타입 붙이기

Code

External links

Exercise

Progress

댓글 0