react - 합성, 그리고 props.childern 사용법

https://ko.reactjs.org/docs/composition-vs-inheritance.html

합성 (Composition) vs 상속 (Inheritance) – React

자, 한번 알아보자. 분명 이론으로는 알지만, 어떻게 구현해야 할 지 감이 안잡히는 경우에 유용할 것이다.

 

이 작업은 

"컴포넌트에서 다른 컴포넌트를 담기"

라고 한다.

 

그럼 어떻게, 합성을 할 수 있을까? 상속에 상속이라는 느낌으로 이해하면 좋을 것 이라 본다.

아래의 코드대로 출력하면, CSS 의 내용물 또한 같이 정상적으로 출력이 가능하다.

 

1. FancyBorder 를 보면, (props) 가 있다.

2. 이를 통해, 아래 하단부에 {props.childern} 이 있다. 이는 해당 function FancyBorder 를 다른 function 에서 활용 가능토록 상속 가능하다고 알려주는 (설계의도)것으로 보인다.

3. 아래 function WelcomeDialog() 에 보면 <FancyBorder color="blue"> 라고 노골적으로 적혀있다. 해당 부분은 CSS 에서 시작하여, 위의 function FancyBorder 를 거쳐서 상속되어 오는 것이다.

 

이를 정확히 표현하면:

<FancyBorder> JSX 태그 안에 있는 것들이 FancyBorder 컴포넌트의 children prop으로 전달됩니다. FancyBorder는 {props.children}을 <div> 안에 렌더링하므로 전달된 엘리먼트들이 최종 출력됩니다.

이다.

 

 

JS.

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

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

CSS.

.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
}

.FancyBorder-blue {
  border-color: blue;
}

.Dialog-title {
  margin: 0;
  font-family: sans-serif;
}

.Dialog-message {
  font-size: larger;
}

 

헷깔린다. 그럼 아래를 보자!

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!" />  // 여기!!
  );
}

분명 WelcomeDialog 에서는 아무런 정의가 내려져 있지 않은 title 과 message 가, Dialog 로 부터 출력되어 읽어지고 있다.

 

React에서는 이 역시 합성을 통해 해결할 수 있습니다. 더 “구체적인” 컴포넌트가 “일반적인” 컴포넌트를 렌더링하고 props를 통해 내용을 구성합니다.

 

어떤가? 필자와 같은 from scratch to developer 처럼 독학중인 이들에게 분명 도움이 되었으리라 본다.