Props와 조합

목표: 속성으로 데이터를 전달하고 기본값을 설정하며, 작은 컴포넌트를 조합하여 사용자 인터페이스를 만듭니다.

• 속성은 컴포넌트 안으로 데이터를 전달합니다.
• 간단한 구조 분해로 기본값을 설정합니다.
• 조합과 자식 요소 슬롯을 사용합니다.

속성은 읽기 전용 입력값입니다. 부모가 자식을 렌더링하며 값을 전달하고, 자식은 매개변수에서 값을 읽습니다.

• 속성을 변경하지 않습니다.
• 부모의 상태나 속성이 변경되면 다시 렌더링됩니다.

매개변수 목록에서 구조 분해를 사용하여 속성에 기본값을 지정합니다: function Card({ title = "Untitled" }).

• 컴포넌트를 안정적으로 유지합니다.
• 마크업에서 정의되지 않은 값인지 확인하는 작업을 줄입니다.

조합은 더 작은 부분(자식 요소와 슬롯)으로 더 큰 사용자 인터페이스를 만드는 것입니다. 유연성과 명확한 데이터 흐름을 위해 상속보다 조합을 우선합니다.

예시: 간단한 카드 레이아웃 안에서 속성을 전달하고 기본값을 설정하며 자식 요소를 조합합니다.

표현용 컴포넌트는 레이아웃과 시각적 요소에 집중합니다. 쉽게 재사용할 수 있도록 가능하면 속성 기반으로 만들고 상태를 두지 않습니다.

• 작은 인터페이스 범위(속성만)를 가집니다.
• 클래스로 스타일을 지정하고 숨은 부수 효과를 피합니다.

복습: 속성으로 데이터를 전달하고 안전한 기본값을 설정하며, 자식 요소를 조합해 유연하고 재사용 가능한 사용자 인터페이스를 만듭니다. 상속 기반 계층 구조는 피합니다.