Component 합성과 추출 [처음 만난 리액트 #18]

5강. Components and Props

[무료] 처음 만난 리액트(React) - 인프런 | 강의

---

Component 합성

: 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것

 

리액트에서는 Component 안에 또 다른 Component를 쓸 수 있음

-> 복잡한 화면을 여러 개의 Component로 나눠서 구현 가능!

 

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

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

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

 

▲ Welcome 컴포넌트를 사용해서 컴포넌트 합성을 하는 예제 코드

 

props의 값을 다르게 해서 Welcome 컴포넌트를 여러 번 사용

-> App이라는 컴포넌트는 Welcome 컴포넌트 세 개를 포함하고 있는 컴포넌트

 

 

App Component 안에 세 개의 Welcome Component가 있고, 각각의 Welcome Component는 각기 다른 props를 가지고 있음

 

이처럼 App Component를 루트로 해서 하위 컴포넌트들이 존재하는 형태가 리액트로만 구성된 앱의 기본적인 구조

(만약 기존에 있던 웹페이지에 리액트를 연동한다면 루트 노드가 하나가 아닐 수 있기 때문에 이런 구조가 아닐 수도 있음)

 

---

Component 추출

: 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 과정

큰 컴포넌트에서 일부를 추출하여 새로운 컴포넌트를 만듦

 

재사용성 ↑

컴포넌트 추출을 잘 활용하게 되면 컴포넌트의 재사용성이 올라감

컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고, props도 단순해지기 때문에 다른 곳에서 사용할 수 있을 확률이 높아지기 때문 

 

개발 속도 ↑

컴포넌트를 잘 추출하면 개발 속도도 빨라짐

 

---

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

 

▲ Comment 컴포넌트 : 댓글을 표시하기 위한 컴포넌트 

내부에 작성자의 프로필 이미지, 이름, 댓글 내용, 작성일을 포함하고 있음 

 

props = {
    author: {
        name: "소플",
        avatarUrl: "https://...",
    },
    text: "댓글입니다.",
    date: Date.now(),
}

 

▲ comment 컴포넌트의 props 형태

 

 

---

1. Avatar 추출하기

Comment 컴포넌트에서는 이미지 태그를 사용하여 사용자의 프로필 이미지를 표시하고 있음

-> 이 부분을 추출해서 Avatar라는 별도의 컴포넌트로 만들자!

 

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

 

▲ 추출된 avatar 컴포넌트

 

props에 기존에 사용하던 author 대신, 좀 더 보편적인 의미를 갖고 있는 user를 사용

 

보편적인 단어를 사용하는 것은 재사용성 측면을 고려한 것

: 다른 곳에서 이 컴포넌트를 사용할 때에도 props에 들어갈 속성들이 의미상 큰 차이없이 사용할 수 있게 하기 위함

 

function Comment(props) {
    return (
        <div ClassName="comment">
            <div className="user-info">
                <Avatar user={props.author} />
                <div className="user-info-name">
                    {props.author.name}
                </div>
            </div>
            
            <div className="comment-text">
                {props.text}
            </div>
            
            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

 

▲ 추출된 avatar 컴포넌트를 comment component에 반영

 

<Avatar user={props.authro} />

Avatar 컴포넌트로 교체되고 나니 코드의 가독성이 높아짐

 

2. UserInfo 추출하기

 

사용자 정보를 담고있는 부분을 추출해서 별도의 컴포넌트로 만들자!

 

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

 

▲ 사용자 정보를 담고있는 부분을 UserInfo 컴포넌트로 추출

 

처음에 추출했던 Avatar 컴포넌트도 함께 추출됨

props에 author 대신 좀 더 보편적인 의미를 가지고 있는 user를 사용

 

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

 

▲ 추출된 UserInfo 컴포넌트를 comment component에 반영

 

코드가 처음에 비해서 매우 간단해짐

 

---

 

Comment Component가 UserInfo Component를 포함하고 있고, UserInfo Component가 Avatar Component를 포함하고 있는 구조

 

지금까지 추출한 것 이외에도 추가적으로 Comment의 글과 작성일이 나오는 부분도 별도의 컴포넌트로 추출이 가능

 

컴포넌트를 어느정도 수준까지 추출하는 것이 좋은지에 대해 정해진 기준은 없지만,

기능 단위로 구분하는 것이 좋고 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋음

ex) Avatar Component나 UserInfo Component는 다른 웹사이트를 만들 때에도 충분히 재사용이 가능

 

재사용 가능한 Component를 많이 갖고 있을수록 개발속도가 빨라진다!