특별한 props - props.children

https://actually-i-am.tistory.com/47

리액트의 기초 - props

props는 컴포넌트를 쓰면서 특정값을 전달해주고 싶을 때 사용한다. 그리고 그 특정값으로 JSX를 넘길 수도 있다. 특별한 props인 children을 사용하면 가능하다. 템플릿을 재사용하고 싶을 때 활용할 수 있다.

 

사용 예시는 아래와 같다.

function App() {
  return (
	  	<Wrapper>
      		<Hello name='react' color="red" />
			<Hello color="pink" />
		</Wrapper>
  );
}

import React from 'react';

function Wrapper(props){
    const style = {
        border : '2px solid black',
        padding : 16
    }
    console.log(props)
    return <div style={style}>{props.children}</div>
}

export default Wrapper;

위와 같은 방식으로 컴포넌트를 나누면, 각자의 컴포넌트에서 신경써야할 요소가 줄어들어 더 복잡한 작업이 가능해진다는 장점이 있다.