[React] props.children
App.js import Wrapper from " ./Wrapper " ; import Hello from " ./Hello " ; function App () { return ( < Wrapper > < Hello ></ Hello > < Hello ></ Hello > </ Wrapper > ) ; } export default App ; Wrapper.js import React from " react " ; const Wrapper = ( { children } ) => { const style = { border : " 1px solid black " , padding : " 16px " , margin : " 5px " , } ; return < div style ={ style }> { children } </ div > ; } ; export default Wrapper ; Hello.js import React from " react " ; const Hello = () => { return < div > test </ div > ; } ; export default Hello ; 최상위 태그가 아닌 컴포넌트 사이에 컴포넌트를 작성하면 상위 컴포넌트에 감싸져있는 하위 컴포넌트들은 출력되지 않는다. 컴포넌트 사이에 작성된 컴포넌트를 출력하기 위해서는 props.children을 사용해야 한다. 감싸고 있는 상위 컴포넌트 즉, 부모 컴포넌트는 props.children 으로 컴포넌트 중간에 작성한 컴포넌트들을 받아 올 수 있다. 위 예시에서 Wrapper 컴포넌트가