# Composition(구성)

- 여러개의 컴포넌트를 합성하는 것
- 리액트에서는 구성보다는 합성이라는 의미가 맞다

!그렇다면
여러개의 컴포넌트들을 어떻게 조합할 것인가?

---

# 1. Containment(방지, 변제)

- Contain(담다, 포함하다)의 의미가 더 강하다
- 하위 컴포넌트를 포함하는 형태의 합성 방법
- Sidebar나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다
   ex)식품사이트의 사이드바 메뉴10개와 쇼핑몰사이트의 사이드바 메뉴8개는
       밑에 하위에 어떤 메뉴가 올지 모르기 때문이다

---

Composition 사용법
- 리액트의 props의 children속성을 사용하면 된다

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

---

예전 강의때...기억이 안난다...

React.createElement(
  type,
  [props],
  [...children] // -----> 이 속성이 있었음 
);

---

예제

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

---

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

function SpliPane(props) { // 화면을 왼쪽, 오른쪽 분류해서 보여줌
  return ( 
    <div className="SplitPane">
      // 별도의 props를 여러개 지정해줌으로써 여러개의 children의 집합을 만든다
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App(props) { // 두개의 props를 정의하여 각각 다른 컴포넌트를 전달 중
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      }
    />
  );
}

---

# 2. Specialization(전문화, 특수화)

- 마이페이지는 여러페이지중에 특별한 케이스이다.
- 정확히는 범용적인 개념을 구별이 되게 구체화 하는 것

- 기존의 객체지향 언어에서는 상속(Inheritance)을 사용하여 Specialization을 구현
- 리액트에서는 합성(Composition)을 사용하여 Specialization을 구현한다!

예제

function Dialog(props) {// 범용적인 의미의 컴포넌트
  return ( 
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function WelcomeDialog(props) { // 특수화
  return (
    <FancyBorder color="blue"> // 쓰는 내용에 따라, 인삿말다이얼로그나 경고창 다이얼로그가 된다
      <h1 className="Dialog-title">
        어서오세요
      </h1>
      <p className="Dialog-message">
        우리 사이트에 방문하신 것을 환영합니다!
      </p>
    </FancyBorder>
  );
}

---

# Comtainment와 Specialization을 같이 사용하기

function Dialog(props) {// 범용적인 의미의 컴포넌트
  return ( 
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function SignUpDialog(props) {
  const [nickname, setNickname] = useState("");
 
  const handleChange = (event) => {
    setNickname(event.target.value);
  }
 
  const handleSignUp = () => {
    alert(`어서 오세요, ${nickname}님!`);
  }

  return (
    <Dialog
      // Specialization
      title="화성 탐사 프로그램"
      message="닉네임을 입력해 주세요.">
      // Containment
      <input
        value={nickname}
        onChange={handleChange}/>
      <button onClick={handleSignUp}>
        가입하기
      </button>
    </Dialog>
  );
}

---

# 3. Inheritance(상속)

- Composition과 대비되는 개념
- 부모클래스를 상속받아 자식클래스를 생성
- 부모클래스의 변수와 함수들을 자식클래스가 그대로 물려 받는다
- 리액트에서는 다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것
- 하지만 메타에서도 그닥 유효성이 있는 방식을 찾지 못함

---

# 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합해서 새로운 컴포넌트를 만들자!