Chapter04. 리엑트 컴포넌트 합성(Composition)

<< 학습 목표 >>

1. 컴포넌트 합성을 사용할 수 있다.

---

컴포넌트 합성(Composition) 이란 컴포넌트 안에 다른 컴포넌트가 들어가는 것을 뜻함

 

우리가 지금까지 만든 주소록 프로젝트도 컴포넌트 합성을 사용했음

AddressMng 부모 컴포넌트 안에 AddressAdd, AddressList 자식 컴포넌트가 들어있음

 

이와 같은 방법도 컴포넌트 합성이긴 하지만 리엑트에서 말하는 진짜 컴포넌트 합성을 사용해보자

프로젝트 -> src -> chapter04 -> AddressMng.jsx 파일 내 코드를 아래와 같이 수정하자

import React, {useState} from 'react';
import AddressAdd from './AddressAdd';
import AddressList from './AddressList';

function ProjectTitle(props) {
    return (
    <div className="text-center">
        {props.children}
    </div>
    );
}

function AddressMng() {
    const [addressInfoList, setAddressInfoList] = useState([]);

    function appendAddressInfo(addressInfo) {
        let newAddressInfoList = Array.from(addressInfoList);
        newAddressInfoList.push(addressInfo);

        setAddressInfoList(newAddressInfoList);
    }

    return(
        <div className="container">
            <ProjectTitle>
                <h1>[ 주소록 관리 프로젝트 ]</h1>
                <hr />
            </ProjectTitle>

            <AddressAdd appendAddressInfo={appendAddressInfo} />

            <AddressList addressInfoList={addressInfoList}/>
        </div>
    );
}

export default AddressMng;

<< 코드 설명 >>

컴포넌트 합성을 사용하지 않았을 때와 사용했을 때를 비교 해보면 [ 주소록 관리 프로젝트 ] 라는 프로젝트 타이틀 부분에 컴포넌트 합성을 사용한 것

<< 코드 설명 >>

AddressMng.jsx 파일 내 컴포넌트가 두 개가 됐음

(1). ProjectTitle

(2). AddressMng

AddressMng 컴포넌트는 마지막 줄에 export (3) 하고 있지만 ProjectTitle 컴포넌트는 파일 내 어디에서도 export 를 하고 있지 않음

따라서 AddressMng 컴포넌트는 다른 컴포넌트에서 import 해 출력할 수 있지만 ProjectTItle 컴포넌트는 다른 컴포넌트에서 import 할 수 없음

즉, AddressMng.jsx 파일 내에서만 사용할 컴포넌트 라는 것

 

(1). ProjectTitle 컴포넌트 안을 보면 props.children 을 출력하는데 사용(4)하고 있는데 children 속성은 우리(개발자) 가 props에 넣는게 아니라 리엑트가 props 에 넣어주는 것

(5). ProjectTitle 컴포넌트를 사용했는데 사이에 태그가 들어있음

  이렇게 컴포넌트 사이에 태그가 들어있다면 리엑트는 ProjectTItle 컴포넌트의 props의 children 속성에 사이에 들어있는 태그를 담아서 전달함

 

(1) 에서 컴포넌트 합성을 적용해 컴포넌트를 선언한 것

(5) 에서 컴포넌트 합성이 적용된 컴포넌트를 사용한 것

---

컴포넌트 합성은 어떻게 활용될까?

주소록 프로젝트의 규모가 작아서 컴포넌트들이 모두 상이함

그러나 포트폴리오처럼 프로젝트 규모가 커지면 컴포넌트 사이에 구조는 같지만 텍스트나 일부만 살짝 달라지는 상황이 자주 발생함

그럴 때 태그를 복사 & 붙여넣기 하는것 보다 컴포넌트 합성을 사용해 구조는 같게 하고 텍스트나 일부가 살짝 달라지는 부분을 props.children 으로 출력하도록 한다면 더 간편하고 효율적으로 컴포넌트를 관리할 수 있음

 

위에서 한 컴포넌트 합성 방법을 Containment 라고 부름