리액트를 사용하면서 여러 컴포넌트에 프롭스로 데이터를 전달한다. 이때 프롭스가 전달되지 않았을때 기본값을 설정할 수 있다. 이를 Default Props라한다.

Default Props

리액트에서 컴포넌트를 생성하는 방법은 함수 컴포넌트와 클래스 컴포넌트가 있다. Default Props 설정 방법에도 차이가 있다

Function Component

function Component(props) {
  return (
    <div>
      <h1>
        {props.message} 함수 컴포넌트
      </h1>
    </div>
  )
}

//defaultProps 설정, 클래스 컴포넌트도 사용가능
Component.defaultProps = {
  message: "기본값"
}

Class Component

class Component extends React.Component {
  render () {
    return (
      <div>
        <h1>
          {this.props.message} 클래스 컴포넌트
        </h1>
      </div>
    )
  }
  //방법 1 Class 내부에서 설정
  static defaultProps = {
    message: "기본값설정 클래스만가능",
  };
}

//방법 2 Class 외부에서 설정 함수컴포넌트 defautProps 지정과 동일.
Component.defaultProps = {
  message: "기본값"
}