props.children

어떤 컴포넌트 사이에 다른 컴포넌트를 넣으면 그 컴포넌트의 props.children에

사이에 들어간 컴포넌트들이 담겨져 온다.

ex)

<Wrapper> 
  <Hello color="red" text="TEST"></Hello>
  <Hello color="yellow" isSpecial={true}></Hello>
  <Hello></Hello>
</Wrapper>

function Wrapper({children}){ // 컴포넌트 사이에 들어온 다른 컴포넌트들은 props.children 에 할당됨
    var style = {
        border : "2px solid blue",
        padding : "20px"
    }

    return (
        <div style={style}>
            {children}
        </div>
    );
}

 

위 예제를 보면 Wrapper 사이에 Hello 컴포넌트들이 들어가있는데 이 Hello들은 Wrapper의 props.children 으로 가져올 수 있다.