자식 프로퍼티

JSX도 마크업 표현식을 사용할 수 있다. JSX에서는 컴포넌트 하위에 배치한 노드 (또는 컴포넌트) 를 하위 컴포넌트에서 프로퍼티로 접근할 수 있게 한다.

App.jsx

우선 App 컴포넌트 App.jsx에 포함시킨 ChildProperty 컴포넌트 하위에 자식 노드를 배치한 경우이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import ChildProperty from './03/ChildProperty';

class App extends React.Component {
  render() {
    return (
      <div className="body">
          <ChildProperty>
            <div><span>자식 노드</span></div>
          </ChildProperty>
        </div>
      </div>
    );
  }
}

export default App;

ChildProperty.jsx

이제 ChildProperty 컴포넌트에서는 {this.props.children}과 같은 방법으로 <div><span>자식 노드</span></div>를 쉽게 받을 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ChildProperty extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

ChildProperty.propTypes = {
  children: PropTypes.node,
};

export default ChildProperty;

결과를 확인하면 {this.props.children} 위치에 <div><span>자식 노드</span></div>가 출력될 것이다.

1
<ChildProperty children={<div><span>자식노드</span></div>} />

이는 위와 같이 별도의 프로퍼티로 자식 노드를 전달하는 것과 같다.

하지만 자식 프로퍼티를 사용하는 방법이 간편하기에, 노드 전달 시에는 자식 프로퍼티를 사용하자.