Composition

원래 composition은 구성이란 뜻을 갖고있지만 리액트에서는 합성을 의미한다.

즉 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 말한다.

 

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

보통 사이드바나 다이얼로그 같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알수없음.

예시로 동일한 사이드바  컴포넌트를 사용하는 두개의 쇼핑몰이 있다고 가정해보자면, 하나의 쇼핑몰에는 의류와 관련된 메뉴가 8개 들어있고 다른 쇼핑몰에서는 식료품과 관련된 메뉴가 10개가 존재함.

이렇게 어떤게 하위 컴포넌트로 올지 모르지?

그래서 이러한 경우에는 containment방법을 사용하여 합성을 사용하게됨.

이걸 사용하는 방법은 리액트 컴포넌트의 props에 기본적으로 들어있는 children속성을 사용하면됨.

 

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

이 컴포넌트를 사용하면 자신의 하위 컴포넌트를 모두 포함하여 예쁜 테두리로 감싸주는 컴포넌트가 됨

그러면 이걸 사용하는 예제를 한번 봐보자

function WelcomeDialog(props) {
	return (
    	<FancyBorder color="blue">
        	<h1 className="Dialog-title">
            	어서와 !
            </h1>
            <p className="Dialog-message">
            	우리 사이트에 방문한걸 환영합니다
            </p>
        </FancyBorder>
    );
 }

자 이 코드를 보면 fancyborder컴포넌트로 감싸진 부분에 h1 p라는 두개의 태그가 들어가있는데 이 두 태그는 모두 fancyborder컴포넌트에 children이라는 props로 전달이됨.

-> 그럼 결과적으로 파란색의 태두리로 감싸지는 결과가 나옴!

 

이 react에서는 props.children를 통해 하위 컴포넌트를 하나로 모아서 제공해줌

but 여러개의 children 집합이 필요한 경우는 어떻게 해야할까?

이런 경우에는 별도로 props를 정의해서 각각 원하는 컴포넌트를 넣어주면됌.

 

function SplitPane(props) {
	return (
    	<div className="SplitPane">
        	<div className="SplitPane-left>
            	{props.left}
            </div>
            <div className="SplitPane-right">
            	{props.right}
            </div>
        </div>
     );
 }
 
 function App(props) {
 	return (
    	<SplitPane
        	left={
            	<Contacts />
            }
            right={
            	<Chat />
           }
        />
     );
 }

우선 맨 위에있는 SplitPane 컴포넌트는 화면을 왼쪽과 오른쪽을 분할해서 보여주는 컴포넌트이다.

여기에서 left right라는 두개의 props를 정의하여 각각 다른 컴포넌트를 넣어주고 있음 이 left right를 props로 받게되고 왼오로 분리해서 렌더링함

이렇게 여러개의 children이 필요한 경우에는 별도의 props를 정의하여서 사용하면됌.

 

이렇게 props.children이나 직접 정의한 props를 이용하여 하위 컴포넌트를 포함하는 형태로 합성하는 방법을 containment라고함.