[React] Composition vs Inheritance

Composition : 뜻은 구성이나 React에서는 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미. 합성과 가까움 
여러 컴포넌트들을 어떻게 조합할지.
조합법에 따라 사용 기법이 나뉜다.


1. Containment : 담다, 포함하다. 뜻으로 하위 컴포넌트를 포함하는 형태의 합성 방법.
sidebar 나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. 
children prop을 사용한다. props의 children 은 제공해주는 것이며 배열형태이다.
여러개의 하위 컴포넌트를 가질 수 있다. 

여러개의 childrn 이 필요한 경우에는 ??
별도의 props를 정의하여 사용한다. 

2. Specialization : 전문화, 특수화라는 뜻이고, WelcomeDialog는 Dialog의 특별한 케이스이다. 
범용보다 구체화된 것이다. 범용적인 개념을 구별이 되게 구체화 하는 것이고,
기존 객체지향 언어에서는 상속(Inheritance)을 사용하여 Specialization을 구현

React에서는 합성(Composition)을 사용하여 Specialization을 구현한다. 

Dialog 함수는 title와 message를 어떻게 쓰느냐에 따라서 다르게 쓸 수 있다(범용적)
WelcomeDialog 함수는 title, message를 인사말을 하는 용도로 사용하였다(전문적)


Containment & Specialization 같이 사용하기
Containment를 위해 props.childrn 을 사용하고 
Specialization을 위해 직접 정의한 props를 사용한다. 

Inheritance  : Containment과 대비되는 개념으로 상속. 다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것.
React를 개발한 Meta에서 수천개의 React Componnent를 만들어 사용했지만, 상속을 받아 Componnent를 만들만한 추천할만한 케이스가 없었다고 함. 있다고 알아두는 정도로 하자. 

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

예제 코드

function Card(props) {
    const { title, backgroundColor, children } = props;

    return (
        <div
            style={{
                margin: 8,
                padding: 8,
                borderRadius: 8,
                boxShadow: "0px 0px 4px grey",
                backgroundColor: backgroundColor || "white",
            }}
        >
            {title && <h1>{title}</h1>}
            {children}
        </div>
    );
}

export default Card;

Containment 은 children 부분,
Specialization 은 title, backgroundColor, children 부분이다.

 

import Card from "./Card";

function ProfileCard(props) {
    return (
        <Card title="Inje Lee" backgroundColor="#4ea04e">
            <p>안녕하세요, 소플입니다.</p>
            <p>저는 리액트를 사용해서 개발하고 있습니다.</p>
        </Card>
    );
}

export default ProfileCard;

출처 : https://github.com/soaple/first-met-react-practice/tree/master/src/chapter_13