리액트[기초] props.children

• props.children 는 컴포넌트 태그 사이의 내용을 보여주는 역할을 한다 
• 부모 컴포넌트에서 <MyComponent> 리액트 </MyComponent> 사이에 작성한 문자열을 MyComponent 내부에서 보여주려면 props.children을 사용해야 한다 

// 부모 컴포넌트
import MyComponent from './MyComponent';
const App = () => {
	return <MyComponent>리액트</MyComponent>;
};
export default App;

// 자식 컴포넌트
const MyComponent = (props) => {
	return( 
    	<div>
        // 안녕하세요, 제 이름은 기본 이름 입니다.
        안녕하세요, 제 이름은 {props.name} 입니다.<br/> 
        
        // children 의 값은 리액트 입니다.
        children 의 값은 {props.children} 입니다. 
        </div>;
     );
};

// 부모 컴포넌트에서 props 값을 따로 지정 하지 않았을때 보여줄 기본 값 
MyComponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;