출처: https://ko.reactjs.org/docs/components-and-props.html
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
데이터를 가진 하나의 "props" 객체 인자를 받은 후 React Element를 반환합니다. 따라서 유효한 Component입니다. JS 함수기 때문에 함수 컴포넌트라고 합니다.
컴포넌트의 이름은 항상 대문자로 시작합니다.
function formatDate(date) {
return date.toLocaleDateString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img
className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'https://placekitten.com/g/64/64',
},
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author}
/>,
document.getElementById('root')
);
구성 요소가 중첩 구조로 이루어져 있기 때문에 변경하기 어려울 수 있지만 comment 부분의 author를 자세히 들여다보면 쉽게 찾을 수 있습니다.
왜 props.author.avatarUrl이 나왔는지, props.author.name이 나왔는지..
function Component, Class Component 모두 자체 props를 수정해서는 안 됩니다.
모든 React Component는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.