React와 TypeScript 통합

컴포넌트 경계마다 입력, 내부 상태, 이벤트, 자식의 타입 계약을 명시하면 UI 조각 사이의 오류를 줄일 수 있습니다.

컴포넌트 타입 경계외부 입력과 내부 상태, 사용자 이벤트가 만나는 지점을 타입으로 고정합니다.
입력

Props

부모가 넘기는 데이터와 콜백의 모양을 인터페이스로 정의합니다.

내부 상태

State

useState가 저장할 값과 갱신 함수의 타입을 고정합니다.

상호작용

Event

클릭과 입력 핸들러가 받는 React 이벤트 객체를 명확히 합니다.

합성

children

ReactNode 등 컴포넌트가 받을 수 있는 자식 범위를 선언합니다.

핵심React.FC를 습관적으로 쓰기보다 함수 인자에 Props 타입을 직접 붙이면 children 포함 여부가 더 선명합니다.