앱이 커짐에 따라 타입 검사를 활용하면 버그 잡기가 쉽다. typescript나 flow를 이용하는데, React 내장용 타입 검사 도구가 있다. props에 타입 검사하는 PropTypes를 이용해보자.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

이는 성능상의 문제로 개발 모드에서만 확인할 수 있다.

하나의 자식만 요구하기

PropTypes.element를 이용하여 컴포넌트의 자식들에 단 하나의 자식만이 전달될 수 있도록 명시할 수 있다.

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // 이것은 반드시 하나의 엘리먼트여야 합니다. 아니라면, 경고(warn)가 일어날 것입니다.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

초기 Prop 값

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// props의 초깃값을 정의합니다.
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
const root = ReactDOM.createRoot(document.getElementById('example')); 
root.render(<Greeting />);

ES2022부터 static키워드를 통해 설정할 수도 있다.

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

함수형 컴포넌트

함수형 컴포넌트에서는 export default하기 전에 propTypes설정으로 추가할 수 있다.

import PropTypes from 'prop-types'

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.propTypes = {
  name: PropTypes.string
}

export default HelloWorldComponent