컴포넌트의 합성

합성이란?

두 개 이상의 컴포넌트를 하나로 합치는 것.
여러 개의 컴포넌트를 어떤 식으로 조합할지에 대한 고민이 필요
리액트에서는 상속보다 합성을 더 많이 쓴다.

containment

한 컨테이너 안에 하위 컨테이너를 포함하는 기법

javascript

function FancyBorder(props) {
	return (
		<div className={'FancyBorder' + props.color}>
			{props.children}
		</div>
	)
}

{props.children}을 통해 하위 컴포넌트가 들어오게 된다.

specialization

범용 컴포넌트의 특수화.

javascript

function Dialog(props) {
	return (
		<FancyBorder color='blue'>
		<h1>{props.title}</h1>
		</FancyBorder>
};

function NewDialog(props) {
	return (
			<Dialog title='어서 오세요'/>
	);
};