자식 프로퍼티
JSX
도 마크업 표현식을 사용할 수 있다. JSX
에서는 컴포넌트 하위에 배치한 노드 (또는 컴포넌트) 를 하위 컴포넌트에서 프로퍼티로 접근할 수 있게 한다.
App.jsx
우선 App 컴포넌트 App.jsx
에 포함시킨 ChildProperty
컴포넌트 하위에 자식 노드를 배치한 경우이다.
1 | import React from 'react'; |
ChildProperty.jsx
이제 ChildProperty
컴포넌트에서는 {this.props.children}
과 같은 방법으로 <div><span>자식 노드</span></div>
를 쉽게 받을 수 있다.
1 | import React, { Component } from 'react'; |
결과를 확인하면 {this.props.children}
위치에 <div><span>자식 노드</span></div>
가 출력될 것이다.
1 | <ChildProperty children={<div><span>자식노드</span></div>} /> |
이는 위와 같이 별도의 프로퍼티로 자식 노드를 전달하는 것과 같다.
하지만 자식 프로퍼티를 사용하는 방법이 간편하기에, 노드 전달 시에는 자식 프로퍼티를 사용하자.