13.Composition, Inheritance

-Composition?

여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 = 합성

 

- Composition 사용 방법

1.Contatinment 

하위 컴포넌트를 포함하는 합성 방법. Children prop을 사용해서 조합한다.

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

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

예시 - WelcomeDialog함수 안 FancyBorder 태그 안에 있는 h1,p 태그가 FancyBorder 함수 안 props.children 부분에 표출된다.

 

function SplitPane(props){
	return (
    	<div className="SplitPane">
        	<div className="SplitPana-left">{props.left}</div>
            <div className="SplitPana-right">{props.right}</div>
        </div>
    );
}

function App(props){
	return (
    	<SplitPane left={ <Contacts /> } right={ <Chat /> } />
    );
}

예시-화면분할 코드. 여러개의 children 집합이 필요한 경우 별도의 props를 정의해서 사용한다.

 

2.Specializtion

범용적인 개념을 구별이 되게 구체화 하는 것.

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

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

예시 

 

-Inheritance?

다른 컴포넌트로부터 상속받아서 새로운 컴포넌트를 만드는 것. 따로 추천 사례가 없다.

 

-실습

function Card(props){
    const {title, backgroundColor, children} = props;
    console.log(backgroundColor)
//backgroundColor: backgroundColor || "white"
//{title && <h1>{title}</h1>}
//Specializtion

//children - Conteinment
    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;

Card.jsx

 

import Card from "./Card";

function ProfileCard(props){
    return (
        <Card title="Inje Lee" backgroundColor="#4ea04e">
            <p>안녕하세요</p>
            <p>잘 부탁드립니다</p>
        </Card>
    );
}

export default ProfileCard;

PropfileCard.jsx

 

(index.js 생략)

 

 

그러면 위와 같이 나온다.