[React] (리액트 공부하기 32) 합성(Composition)

1. Containment (포함)

Containment는 컴포넌트 안에 하위 컴포넌트를 포함하는 형태의 합성 방법이다.
React에서 props.children을 사용해 하위 컴포넌트를 전달하고 렌더링할 수 있다.

코드 예제:

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

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

설명:

• FancyBorder 컴포넌트는 props.children을 사용해 내부에 하위 요소를 포함한다.
• WelcomeDialog 컴포넌트는 FancyBorder를 사용해 h1과 p 태그를 감싸며 스타일을 적용한다.

---

2. Specialization (특수화)

Specialization은 범용적인 컴포넌트를 기반으로 특정 용도에 맞게 확장하거나 특수화 하는 방식이다.

코드 예제:

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

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

설명:

• Dialog는 FancyBorder를 재사용하며 title과 message를 전달받아 화면에 표시한다.
• WelcomeDialog는 Dialog를 특수화한 형태로, 인사말에 특화된 데이터를 전달한다.

---

3. Containment와 Specialization의 조합

이 두가지 방법을 조합하여 보다 유연하고 강력한 컴포넌트를 구성할 수 있다.

코드 예제:

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

function SignUpDialog() {
  const [nickname, setNickname] = React.useState('');
  
  const handleChange = (event) => setNickname(event.target.value);
  
  const handleSignUp = () => alert(`어서 오세요, ${nickname}님!`);
  
  return (
    <Dialog title="회원 탐사 프로그램" message="닉네임을 입력해주세요.">
      <input value={nickname} onChange={handleChange} />
      <button onClick={handleSiguUp}>가입하기</button>
    </Dialog>
  );
}

• Dialog는 props.children을 통해 추가적인 하위 컴포넌트를 포함할 수 있다.
• SignUpDialog는 사용자의 닉네임을 입력받는 특수한 다이얼로그로 구현되었다.

---

4. 핵심 정리

• Containment는 하위 컴포넌트를 포함하기 위해 props.children을 사용한다.
• Specialization은 범용 컴포넌트를 특정 용도로 확장하거나 변형한다.
• 이 두가지를 조합하면, 다양한 요구사항에 맞는 컴포넌트를 효율적으로 설계할 수 있다.

---

+ 5. props.children란?

React에서 props.children은 컴포넌트의 열고 닫는 태그 사이에 있는 내용을 나타낸다.

이 내용은 컴포넌트가 렌더링될 때 자동으로 전달되며, 부모 컴포넌트에서 자식 컴포넌트로 전달되는 props의 특별한 속성이다.

props.children의 작동 방식

기본적으로 사용되는 구조:

function ParentComponent(props) {
  return <div>{props.children}</div>;
}

function App() {
  return (
    <ParentComponent>
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </ParentComponent>
  );
}

결과:

<div>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</div>

• ParentComponent는 props.children을 사용해 태그 사이의 내용을 렌더링한다.
• App 컴포넌트에서 <ParentComponent> 태그 안에 있는 <h1> <p>가 props.children으로 전달된다.