React는 강력한 합성 모델을 가지고 있다
상속 대신 합성을 사용하여 코드를 재사용 하는 편이 좋다
어떤 자식 엘리먼트가 올지 예상할 수 없는 경우
children prop 을 사용하여 자식 엘리먼트 출력에 그대로 전달하는 것이 좋다
떄로는 특수한 경우인 컴포넌트를 고려해야 하는 경우가 있다
구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링 하고 props로 데이터를 넘겨준다
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
리액트 컴포넌트 사용 중 상속을 해야할만한 사례는 없다
재사용이 필요하면 컴포넌트로 분리 하는편이 좋다