Props 계약이 호출부에서 렌더 결과까지 이어진다

첫 매개변수 타입이 JSX 속성 계약이 되고, 상태와 콜백 타입이 내부 흐름을 잇는다.

1

부모 JSX 호출

<Profile user={user} onSave={save} /> 속성 검사 시작

필수·선택 속성과 값 타입을 확인한다.

2

Props 매개변수

function Profile(props: ProfileProps) 공개 계약 확정

첫 매개변수 타입이 속성의 기준이다.

3

상태·콜백 전파

ViewState = "idle" | "saving" onSave(id: string)

상태 전이와 부모로 돌려줄 값을 제한한다.

4

JSX 결과 확인

return <button>Save</button> JSX runtime 타입

반환 결과와 내부 요소도 JSX 타입으로 검사한다.

Props

부모가 결정

required·optional·union으로 호출 조합을 제한한다.

State

컴포넌트가 소유

초기값이 부족하면 union을 명시한다.

Callback

데이터가 역방향 이동

DOM 이벤트 대신 도메인 값을 노출한다.

변경 영향 ProfileProps를 바꾸면 JSX 호출부와 콜백 구현의 불일치가 함께 드러난다.