React 컴포넌트 props 계약과 이벤트 타입 경계

Props 설계

컴포넌트가 받는 데이터와 콜백을 인터페이스로 드러내고 optional의 의미를 제한한다.

계약

분기 모델링

variant나 status는 문자열 나열보다 discriminated union으로 가능한 조합을 좁힌다.

state union

이벤트 타입

input, form, button 이벤트를 요소 타입과 함께 적어 target 접근을 안전하게 만든다.

React event

상태 초기화

초기 null이나 빈 배열이 실제 로딩·비어 있음 상태와 섞이지 않게 타입을 나눈다.

state shape

children

내용 슬롯이면 ReactNode, render prop이면 함수 타입을 사용한다. children이 필수인지 선택인지도 props에 드러낸다.

slot 계약

variant

variant별 필요한 props가 다르면 union으로 묶는다. 불가능한 prop 조합을 컴파일 단계에서 막는다.

impossible states

callback

콜백 인자는 도메인 값으로 넘기고 DOM 이벤트 노출을 최소화한다. 부모가 DOM 구조를 알 필요 없게 만든다.

encapsulation

컴포넌트 타입 점검

optional 남용 선택 props가 내부에서 항상 필요하면 모델을 다시 나눈다.

event target any 캐스팅 없이 currentTarget 값을 읽을 수 있다.

상태 분리 loading, empty, error, success가 같은 null 값으로 뭉개지지 않는다.

Union props 예시

type ButtonProps =
  | { kind: "link"; href: string
        overflow-wrap: break-word;
        word-break: keep-all;
      }
  | { kind: "action"; onClick(): void };