[React] Composition & Inheritance 설명

Composition(합성) vs Inheritance(상속)

React에서는 코드 재사용을 위한 방법으로 Composition(합성)과 Inheritance(상속)가 사용된다

1. Composition - 합성

React에서 Component는 어떤 element가 자식 element로써 올지 알 수 없다. 이를 children prop을 사용해서 알 수 있다.

function ProfileCard(props) {
    return (
        <Card title="Taejun Seo" backgroundColor="#4ea04e">
            <p>안녕하세요</p>
            <p>저는 리액트를 공부하고 있습니다</p>
        </Card>
    );
}

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>
    );
}

위처럼 React에서는 Component안에 있는 자식 element를 props의 children을 통해 불러올 수 있다. 

이처럼 자식 element를 props에 할당후 사용하는 방식을 Composition(합성) 이라고 한다.

 

2. Inheritance - 상속

부모 클래스 component를 자식 클래스 component가 상속받아서 구현되는것을 상속이라고 합니다.

리액트 공식문서에 따르면 상속보다 합성을 이용하여 코드 재사용을 하는것이 더 바람직하다고 합니다.

 

출처

https://reactjs-kr.firebaseapp.com/docs/composition-vs-inheritance.html