<Child name="joon">
<Child name="joon" age=30 position="mentor">
//props는 객체 형태의 데이터
props = {
name: "joon",
age: 30,
position: "mentor"
}
"goal is to customize and show some content to the user or react to user interaction"
"Remember, it's all about having a parent customize how the child looks or behaves."
리액트에서 props를 통해 컴포넌트 간에 상호작용하는 단계에는 두 가지가 있다.
Children.js
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import "./Children.scss";
import Person from "./Person";
export class Children extends Component {
render() {
return (
<div className="Children">
<h1>React Children</h1>
<hr />
<section className="card-section">
<Person
name="joonsikyang"
email="joonsik@wecode.com"
position="Frontend Mentor"
/>
<Person
name="yerikim"
email="yerikim@wecode.com"
position="Frontend Mentor"
/>
<Person
name="jihunpark"
email="jihunpark@wecode.com"
position="Backend Mentor"
/>
</section>
</div>
);
}
}
export default withRouter(Children);
Person.js
import React, { Component } from "react";
import "./Person.scss";
export class Person extends Component {
render() {
return (
<div className="Person">
<div className="name">{this.props.name}</div>
<div className="detail">
<div>{this.props.email}</div>
<div>{this.props.position}</div>
</div>
</div>
);
}
}
export default Person;
{this.props.name}
이런식으로 사용할 수 있습니다.children.js
// Children.js - 부모 컴포넌트
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import Person from "./Person";
import ApprovalCard from "./ApprovalCard";
import "./Children.scss";
export class Children extends Component {
render() {
return (
<div className="Children">
<h1>React Children</h1>
<hr />
<section className="card-section">
<ApprovalCard>
<Person
name="joonsikyang"
email="joonsik@wecode.com"
position="Frontend Mentor"
/>
</ApprovalCard>
<ApprovalCard>
<Person
name="yerikim"
email="yerikim@wecode.com"
position="Frontend Mentor"
/>
</ApprovalCard>
<ApprovalCard>
<Person
name="jihunpark"
email="jihunpark@wecode.com"
position="Backend Mentor"
/>
</ApprovalCard>
</section>
</div>
);
}
}
export default withRouter(Children);
<ApprovalCard> ... </ApprovalCard>
이렇게 작성되어 있습니다.<Person />
컴포넌트가 들어있습니다.<ApprovalCard>
컴포넌트의 props로 <Person />
컴포넌트가 전달됩니다.<Person />
props = {
children: <Person />
}
ApprovalCard.js
// ApprovalCard.js - this.props.children
import React, { Component } from "react";
import "./ApprovalCard.scss";
export class ApprovalCard extends Component {
render() {
console.log("this.props: ", this.props);
return (
<div className="ApprovalCard">
<div className="top">{this.props.children}</div>
<div className="bottom">
<div className="btn cancel">Decline</div>
<div className="btn okay">Approve</div>
</div>
</div>
);
}
}
export default ApprovalCard;
{this.props.children}
으로 접근할 수 있습니다."Inside props object, you can notice that it has a single property inside of it called children"