Children props 전달하기

1) 태그와 태그사이에 넣는 내용 전달하기 

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/> 
      {/* hello 컴포넌트에 react라는 name을 작성, 그다음 Hello 컴포넌트를 작성 */}
      <Hello color="pink" />
    </Wrapper>
  )
}

export default App;

 

위와 같이, Wrapper라는 태그사이에 내용을 넣고 싶을 때 사용,

 

2) Wrapper를 통해 태그에 적용할 스타일을 만들 수 있다. 

import React from 'react';

function Wrapper({ children }){
    const style = {
        border: '2px solid black',
        padding: 16
    };

return <div style={style}>{children}</div> // wrapper에서는 children이라는 props를 사용했는데 children: 태그와 태그사이에 넣는 내용 
}

export default Wrapper;