13강. Composition vs Inheritance

Composition 방법과 Inheritance

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

 

Composition 조합방법

- Containment : 하위 컴포넌트를 포함하는 형태의 합성 방법, Sidebar나 Dialog같은 Box형태의 컴포넌트는 자신의 하위 컴포넌터를 미리 알 수 없음, children이라는 props를 사용해서 조합

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

React.createElement(
  type,
  [props],
  [..children]
);


function WelcomDialog(props){
  return(
  
    //FancyBorder 컴포넌트 내의 모든 jsx태그는 children으로 전달됨
    <FancyBorder color="blue">
      <h1 className="Dialog-title">어서오세요</h1>
      <p className="Dialog-message">환영합니다.</p>
    </FancyBorder>
  );
}

 

여러개의 children집합이 필요한 경우 : 별도의 props를 정의하여 사용

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

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

 

- 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 WelcomDialog(props){
  return(
    <Dialog title="어서오세요" message="환영합니다" />
  );
}

 

Containment와 Specialization같이 사용하기

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

function SignUpDialog(props){
  const [nickname, setNickname] = useState('');
  const handleChange = (event) => {
    setNickname(event.target.value);
  }
  const handleSignUp = () => {
    alert(`어서오세요, ${nickname}님`);
  }
  
  return(
    <Dialog title="프로그램" message="닉네임 입력하세요">	//specialization, 값 전달
      <input value={nickname} onChange={handleChange} />	//containment, 정보등록
      <button onClick={handleSignUp}>가입하기</button>
    </Dialog>
  );
}

 

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

 

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

 

(실습) Card 컴포넌트 만들기

//card.jsx
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;

//profileCard.jsx
import Card from "./Card";

function ProfileCard(props){
    return (
        <Card title="Inje Lee" backgroundColor="green">
            <p>안녕하세요, 소플입니다.</p>
            <p>저는 리액트 ..</p>
        </Card>
    );
}
export default ProfileCard;