컴포넌트 계약

컴포넌트 계약 검증

부모가 넘긴 값부터 내부 상태와 사용자 이벤트까지 타입을 붙이면 UI 변경이 실행 전에 확인됩니다.

조합 흐름

typed UI

Parent

컴포넌트에 넘길 값과 콜백의 매개변수 타입을 고정해 잘못된 props 전달을 막습니다.

Props

필수·선택 속성과 children 포함 여부를 명확히 선언합니다.

State

useState 초기값과 이후 변경 가능한 값의 범위를 맞춥니다.

Event

ChangeEvent, MouseEvent로 DOM 입력 객체를 안전하게 다룹니다.

Render

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

parent → props → state → event → render