-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
컴포넌트 추출 관련 질문
24.04.12 14:47 작성 조회수 68
1
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로 바꿔쓸 수 있는 이유가 궁금합니다.
답변을 작성해보세요.
1
Inje Lee (소플)
지식공유자2024.04.12
안녕하세요, 소플입니다.
질문해주신 부분을 이해하려면,
먼저 상위 컴포넌트에서 데이터를 꺼내서 하위 컴포넌트에 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를 쓸 수 있는 것입니다.
감사합니다.
답변 1