react.dev/tips/07-children-props-type.ko-KR.md

id	title	layout	permalink	prev	next
children-props-type-ko-KR	자식 속성들의 타입	tips	tips/children-props-type-ko-KR.html	style-props-value-px-ko-KR.html	controlled-input-null-value-ko-KR.html

컴포넌트의 자식들(this.props.children)은 대부분 컴포넌트의 배열로 들어갑니다:

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => true
  },

  render: function() {
    return <div />;
  }
});

ReactDOM.render(
  <GenericWrapper><span/><span/><span/></GenericWrapper>,
  mountNode
);

하지만 자식이 하나만 있는 경우, this.props.children는 배열 래퍼(wrapper)없이 싱글 자식 컴포넌트가 됩니다. 이렇게 함으로써 배열 할당을 줄일 수 있습니다.

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => false

    // 경고 : 산출된 5 값은 'hello' 스트링의 길이 입니다. 존재하지 않는 배열 래퍼의 길이인 1이 아닙니다!

    console.log(this.props.children.length);
  },

  render: function() {
    return <div />;
  }
});

ReactDOM.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

this.props.children을 쉽게 다룰 수 있도록 React.Children utilities를 제공하고 있습니다.