React Type Contract
컴포넌트 타입은 호출부, 상태, 이벤트, JSX 결과를 한 계약으로 묶는다
Props는 부모 호출부에서, State와 Event는 컴포넌트 내부에서, JSX 결과는 렌더 경계에서 검증된다.
Props부모가 넘기는 필수/선택 입력
Default선택 입력을 내부 기본값으로 보강
State초기값과 갱신값의 범위 유지
Event대상 요소와 핸들러 시그니처 고정
Render조건부 JSX의 반환 분기 확인
| 검사 지점 | 타입 선언 위치 | 주로 잡는 오류 | 설계 기준 |
|---|---|---|---|
| 함수형 컴포넌트 | Props 타입, Hook 제네릭 | 누락 Props, 잘못된 State 값 | Props 타입을 먼저 작게 정의한다 |
| 클래스 컴포넌트 | P / S 계약 |
생성자와 render의 State 구조 불일치 | 초기 State와 갱신 State를 같은 계약으로 둔다 |
| 이벤트 핸들러 | React 이벤트 타입 | 대상 요소 오해, 값 접근 오류 | 핸들러 매개변수를 명시한다 |
| 컴포넌트 조합 | 부모 호출부와 자식 Props | 속성 이름 변경 누락 | 리팩토링 시 호출 지점을 함께 추적한다 |
| 조건부 렌더 | union 상태와 반환 JSX | loading/error/empty 상태 혼합 | 화면 상태를 하나의 null 값으로 뭉개지 않는다 |
안전한 호출잘못된 Props는 빌드 전에 드러난다.
변경 추적이름과 구조 변경의 영향 범위를 바로 찾는다.
문서 효과타입 선언이 컴포넌트 사용법의 계약서가 된다.