컴포넌트 계약

React 컴포넌트 타입 경계

Props, State, Event, Render 결과를 각각 타입으로 고정하면 컴포넌트 사용 실수와 내부 상태 접근 오류가 실행 전에 드러납니다.

검증 경계

Props

필수 값, 선택 값, 콜백 매개변수, children 포함 여부를 선언합니다.

WelcomeMessageProps

State

null 초기값과 객체 상태는 제네릭으로 가능한 범위를 드러냅니다.

useState<User | null>

Event

입력과 버튼의 이벤트 타입을 나누어 target 접근을 안전하게 만듭니다.

ChangeEvent<HTMLInputElement>

Render

조건부 null 반환과 JSX 결과도 컴포넌트의 반환 계약에 포함됩니다.

JSX.Element | null
부모 전달 → Props 검사 → 상태 좁히기 → 렌더링