자식 컴포넌트가 부모 컴포넌트로 부터 데이터를 받아와서 처리해야할 경우가 생긴다.
우선 부모 컴포넌트에서 자식 컴포넌트 쪽으로 데이터를 전달하기 위해 전달하려는 속성을 추가한다.

import React, { Component } from 'react';
import ChildComp from './childComponent';
class App extends Component {
  render() {
    return (
      <div>
        <ChildComp userName="insik" />
      </div>
    );
  }
}

export default App;

ChildComp 에 userName 의 값을 'insik'으로 전달했다.
이제 자식 컴포넌트인 childComponent.js 를 생성하여 아래 코드를 삽입한다.

import React, { Component } from 'react';

class Myname extends Component {
  static defaultProps = {
    userName: '홍길동'
  };
  render() {
    return (
      <div>
        <b>{this.props.userName}</b>
      </div>
    );
  }
}
export default Myname;

this.props.userName 을 통해 부모로 받은 값을 노출한다.
위 코드 중에는 defaultProps가 있다. 이 것은 부모 컴포넌트에서 props를 전달하지 않았을 때 기본 설정하는 값이다.

부모에서 <ChildComp userName="" /> 이렇게 빈 값이 아니라 아예 속성을 없앤 <ChildComp /> 의 경우를 defaultProps에 지정된 기본 값이 있으면 그 값으로 노출한다는 것이다.

자식 컴포넌트가 클래스 컴포넌트가 아니라 함수형 컴포넌트의 경우는 아래처럼 처리한다.

import React from 'react';
const Myname = ({ userName }) => {
  return (
    <div>
      <b>{userName}</b>
    </div>
  );
};
Myname.defaultProps = {
  userName: '홍길동'
};
export default Myname;