9. 합성 (Composition)

 

리액트에서 합성(Composition)이란 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것이다.

여러 개의 컴포넌트를 어떻게 조합할 것인지에 따라 합성의 사용 기법이 다음과 같이 다양하다.

 

Containment

하위 컴포넌트를 포함하는 형태의 합성 방법이다.

props.children을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다.

 

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

//FancyBorder 컴포넌트 활용
functino WelcomeDialog(props) {
  return (
    <FancyBorder color="blue">
    	<h1 className="Dialog-title">
    		어서오세요
    	</h1>
    	<p className="Dialog-message">
    		우리 사이트에 방문하신 것을 환영합니다!
    	</p>
    </FancyBorder>
  );
}

 

 

Specialization

전문화라는 의미로 범용적인 개념을 구별이 되게 구체화하는 것이다.

객체지향 언어에서는 상속을 사용하여 Specialization을 구현하지만, 리액트에서는 합성을 사용하여 Specialization을 구현한다.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
    	<h1 className="Dialog-title">
    		{props.title}
		</h1>
		<p className="Dialog-message">
          	{props.message}
		</p>
	</FancyBorder>
  );
}

function WelcomeDialog(props) {
  return (
    <Dialog
    	title="어서오세요"
    	message="우리 사이트에 방문하신 것을 환영합니다!"
    />
  );
}