[리액트(React) Study Log] [Person App-007] Understanding the Children Property
1. JSX 에서 multiline 입력하기
- JSX의 return 구문에서 multiline 입력을 하려면 괄호로 양 끝을 감싸고, 그 안쪽에 전체를 감싸는 div 를 wrapping element 로 사용함.
2. Children Props
- 부모 component 에서 사용되는 자식 component 가 opening tag, closing tag 형식으로 사용될 때 그 사이에 들어가는 data 는 자식 component 에게 children 이라는 Props 로 전달됨.
<Person name="Lina" age="29">Nice to meet you.</Person>
- chileren props 에는 text, list, other react component 등 어떤 것도 올 수 있음.
- 자식 component 에서는 부모가 전달하는 children props 를 {props.children} 으로 사용함.
//src-Person-Person.js
import React from 'react';
const person = (props) => {
return (
<div>
<p>I'm a {props.name} and I am {props.age} years old!</p>
<p>{props.children}</p>
</div>
)
}
export default person;
- 브라우져 확인
