1-3. props.children

children은 컴포넌트 사이의 내용을 보여 주는 props입니다.

App.js코드를 수정하여 봅시다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent name="송한솔">리액트</MyComponent>
    </div>
  );
};

export default App;

이렇게 수정하여도 코드에 기입한 ‘리액트’는 출력되지 않습니다.
이때 사용하는게 props.children로 컴포넌트 사이에 기입한 문자열을 출력해줍니다.

이제 MyComponent.js로 가서 다음과 같이 수정하여 보세요.

import React from 'react';

const MyComponent = props => {
    const {name} = props;
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br/>
            children값은 {props.children}입니다.
        </div>
    );
};

MyComponent.defaultProps = {
    name: '이름'
}

export default MyComponent;