컴포넌트 추출 관련 질문
276
작성한 질문수 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
1
안녕하세요, 소플입니다.
질문해주신 부분을 이해하려면,
먼저 상위 컴포넌트에서 데이터를 꺼내서 하위 컴포넌트에 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를 쓸 수 있는 것입니다.
감사합니다.
강의가 삭제되었다고 합니다
0
106
1
이거 왜 존재하지 않는다고 뜨는건가요
0
133
1
존재하지 않는 수업이라고 떠요
0
183
1
안드로이드 에뮬레이터 오류
0
100
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
126
1
prevIsConfiromed 질문
1
141
2
chapter14 잘이해가 되지않습니다..
1
135
2
2025년 3월 리액트버전
1
202
2
npm 설치 오류
1
175
1
chapter_07 콘솔로그 질문드려요~!
1
128
2
안녕하세요 미니블로그 실습 질문드립니다.
1
178
3
에러가 떠요
1
219
3
Chapter6 질문 드립니다
1
209
2
실습 코드 있을까요?
1
206
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
233
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
308
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
140
1
버튼이 안 뜹니다
0
303
2
npx create-react-app my-app
1
470
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
376
3
Chapter_05 터미널, 리액트 에러
0
193
2
npx create-react-app my-app 명령어 반응없음
1
432
3
import 코드 에러
1
214
1
백틱
1
121
1