React + TS

React 컴포넌트 타입

컴포넌트가 받는 값, 내부 상태, 이벤트 핸들러의 타입을 나누면 UI 계약과 사용자 입력 처리가 안전해진다.

컴포넌트 타입 경계

typed UI

Props 타입

컴포넌트 외부에서 전달해야 하는 데이터와 선택 속성을 정의한다.

State 타입

useState의 초기값과 변경 가능한 값의 범위를 일관되게 유지한다.

이벤트 타입

ChangeEvent, MouseEvent처럼 DOM 이벤트 객체의 형태를 명확히 한다.

propsstateeventrender
컴포넌트 계약

React에서 TypeScript를 쓰는 이유는 컴포넌트 경계를 문서화하고, 잘못된 prop이나 이벤트 접근을 실행 전에 잡기 위해서다.