컴포넌트 추출 관련 질문

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>
    );
}

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

// Avatar 컴포넌트 추출
function Avatar(props) {
    return (
        <img className="avatar"
            src={props.user.avatarUrl}
            alt={props.user.name}
        />
    );
}

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

안녕하세요. 위의 코드는 Component 합성과 추출 수업 때 썼던 코드입니다. 컴포넌트 추출할 때 author 대신 user를 쓴다고 나와있는데 props 객체에서는 author만 있는데도 컴포넌트 추출할 때 user로 바꿔쓸 수 있는 이유가 궁금합니다.

안녕하세요, 소플입니다.

질문해주신 부분을 이해하려면,

먼저 상위 컴포넌트에서 데이터를 꺼내서 하위 컴포넌트에 props로 전달하는 과정을 잘 이해할 필요가 있습니다.

아래 예시 코드를 보면 RootComponent에서는 ParentComponent를 사용하며 author라는 props로 이름을 넘기고 있습니다.

그리고 이렇게 ParentComponent로 전달된 props는 { author: "Inje Lee" } 형태를 가지게 됩니다.

다음으로 ParentComponent에서는 전달받은 props에서 author라는 값을 꺼내어 ChildComponent에 user라는 이름의 props로 전달하고 있습니다.

그래서 최종적으로 ChildComponent에 전달된 props는 { user: "Inje Lee" } 형태를 가지게 됩니다.

function RootComponent(props) {
    return (
        <div>
            <ParentComponent author="Inje Lee" />
        </div>
    );
}

function ParentComponent(props) {
    // props의 모습: { author: "Inje Lee" }
    return (
        <div>
            <ChildComponent user={props.author} />
        </div>
    );
}

function ChildComponent(props) {
    // props의 모습: { user: "Inje Lee" }
    return <div>{props.user}</div>;
}

이처럼 컴포넌트를 사용할 때의 실제 변수명이 props의 키 값으로 사용된다고 이해하시면 됩니다.
(ChildComponent에서는 user가 키 값)

강의에서 사용된 예제에서도 상위 컴포넌트에서 값을 꺼내서 전달하는 것이기 때문에,

그 키 값이 author이든 다른 것이든 상관없이 하위 컴포넌트에서 user라는 값을 사용하도록 구현하였기 때문에 user를 쓸 수 있는 것입니다.

감사합니다.

인프런 커뮤니티 질문&답변