props 계약

props: 부모가 자식에게 넘기는 렌더 계약

props 점검은 값 전달 여부만 보는 것이 아니라 필수/옵셔널/children/콜백의 의미와 잘못 전달됐을 때 화면이 어떻게 깨지는지까지 확인해야 한다.

01

부모 상태 결정

부모가 소유한 데이터와 이벤트 핸들러를 먼저 정한다.

source of truth
02

자식 입력 선언

자식 컴포넌트는 필요한 props 이름과 타입, 기본값을 명확히 한다.

interface
03

렌더 분기 처리

옵셔널 값이 없을 때 placeholder, skeleton, 숨김 중 하나를 선택한다.

fallback
04

콜백 연결

onSelect/onSubmit 같은 함수 props는 인자와 호출 시점을 고정한다.

이벤트 계약
required
필수 props 누락 제목, id, 데이터 배열처럼 렌더의 핵심 값은 누락 시 에러 또는 명시 fallback을 둔다.
undefined UI 방지
optional
있을 수도 없는 값 subtitle, avatar처럼 없어도 되는 값은 기본 UI와 조건부 렌더를 함께 설계한다.
default value
children
조합 위치가 흐려짐 카드/모달처럼 내부 내용을 부모가 주입할 때 children의 책임 범위를 정한다.
composition
callback
인자 형태 불일치 자식이 넘기는 payload가 부모 reducer/state 업데이트와 맞는지 확인한다.
onChange(value)

화면 결과 확인

잘못된 값 빈 배열, null, 긴 문자열을 넣어 레이아웃과 fallback이 안정적인지 본다.
이벤트 클릭 후 부모 상태가 변하고 같은 props가 다시 자식에게 내려오는지 추적한다.
불필요 전달 자식이 쓰지 않는 props가 계속 늘면 컴포넌트 경계가 흐려진 신호다.