[React] Composition 방법과 Inheritance

 

✔ Composition 

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

 

 

① Containment 

- 하위 컴포넌트를 포함하는 형태의 합성 방법

⁎ Sidebar 나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.

 

• children prop 을 사용한 FancyBorder 컴포넌트

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

• WelcomeDialog 컴포넌트

import React from "react";
import FancyBorder from "./FancyBorder";

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

export default WelcomeDialog;

FancyBorder 컴포넌트 안에 있는 모든 JSX 태그는 children 으로 전달된다.

뭔데 뭔 말인데 이게

왜 이래야 하는 건데

 

 

② Specialization

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

⁎ 기존의 객체지향 언어에서는 상속(Inheritance)을 사용하여 Specialization 을 구현하지만, 

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

 

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="우리 사이트에 방문하신 것을 환영합니다!"
        />
    );
}

오

진짜 왜 이래야 되는지 모르겠다

 

 

③ Containment 와 Specialization 을 같이 사용하기

import React, {useState} from "react";
import FancyBorder from "./FancyBorder";

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

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

function SignUpDialog(props) {
    const [nickname, setNickname] = useState('');

    const handleChange = (event) => {
        setNickname(event.target.value);
    }

    const handleSignUp = () => {
        alert(`어서오세요, ${nickname}님!`);
    }

    return (
        <Dialog
            title="화성 탐사 프로그램"
            message="닉네임을 입력해 주세요.">
            <input 
                value={nickname}
                style={{margin: 10, border: "3px solid" }}
                onChange={handleChange} />
            <button onClick={handleSignUp} style={{margin: 10, backgroundColor: "pink", border: "2px solid", borderRadius: 4}}>
                가입하기
            </button>
        </Dialog>
    );
}

export default SignUpDialog;

 

 

✔ Inheritance 

: 다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것

 

근데 리액트에서는 상속보다는 Composition 을 사용하는 것이 좋다. 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합해서 새로운 컴포넌트를 만드는 게 좋대