[React] Component 합성과 추출

1. Component 합성

Component 안에 또 다른 Component를 쓸 수 있어 복잡한 화면을 여러개의 Component로 나눠서 구현 가능

 

App Component안에 세 개의 Welcome Component를 생성

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

function App(props) {
    return (
        <div>
            <Welcome name="Kyle"/>
            <Welcome name="Jane"/>
            <Welcome name="Peter"/>
        </div>
    )
}

ReactDOM.render(
    <App />
    document.getElementById('root')
);

 

2. Component 추출

- 큰 Component를 조각내어 새로운 Component를 생성

- 재사용성, 개발속도 증가에 좋음

 

아래의 Component를 여러개의 Component로 추출해보겠습니다.

function Comment(props) {
    return (
        <div className="comment">
            <div className="user-info">
                <img className="image"
                    src={props.user.imageUrl}
                    alt={props.user.name}
                />
                <div className="user-info-name">
                    {props.user.name}
                </div>
            </div>
            
            <div className="comment-text">
                {props.text}
            </div>
            
            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

props = {
    user: {
        name: "Kyle",
        imageUrl: "https://localhost/images/...",
    },
    text: "HiHi",
    date: Date.now(),
}

 

2-1. Image Component

function Image(props) {
    return (
        <img className="image"
            src={props.user.imageUrl}
            alt={props.user.name}
        />
    );
}

 

2-2. User Component

function UserInfo(props){
    return (
        <div className="user-info">
            <Image user={props.user} /> // Image Component 사용
            <div className="user-info-name">
                {props.user.name}
            </div>
        </div>
    );
}

 

User Component를 사용하여 메인 코드를 변경하면,

즉, Comment Component > UserInfo Component > Image Component

function Comment(props) {
    return (
        <div className="comment">
            <UserInfo user={props.user} />
            
            <div className="comment-text">
                {props.text}
            </div>
            
            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}