PropTypes를 사용하게 된 계기

처음에 react로 개발할 때 java나 다른 OOP 언어들을 개발할 때와 달리 타입 선언을 해주지 않았다. 그만큼 자유도가 높은게 장점이지만, 또 단점이라고 볼 수 있다. 타입을 선언해 주는 언어들은 선언해준 타입과 다른 타입의 데이터가 들어오면 그에 맞는 에러를 알려주지만, react는 에러가 발생했을 때 어디서 어떤 에러가 발생했는지 찾기 어렵기 떄문이다.

PropTypes의 사용

그래서 PropTypes를 사용하게 되었다. PropTypes는 props의 타입을 선언할 수 있다.
다음과 같이 코드를 작성하면 된다.

import PropTypes from 'prop-types';

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

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

prop-types를 import해주고 어떤 클래스에서 사용하는 props의 타입을 체크할 때 위와같이 사용한다.
Greeting 컴포넌트에서 name이라는 props를 상위 컴포넌트에서 받아올 때 그 값이 string인지 체크한다는 것이다.

아직 사용해보진 않았지만..

하나의 자식만 요구하기

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

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
};

PropTypes.element가 children이라는 props에 단 하나의 값만이 넘어오도록 하겠다는 뜻이다.

초기 Prop 값

defaultProps 프로퍼티를 할당함으로써 props의 초깃값을 정의할 수 있다.

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

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

// "Hello, Stranger"를 랜더링 합니다.
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

defaultProps는 부모 컴포넌트에서 값이 명시되지 않고 내려올 때 받는 자식 컴포넌트에서 디폴트로 보여줄 값을 지정한다고 생각하면 된다. Greeting 컴포넌트에 name값이 넘어오지 않을 때 ‘Stranger’라는 값을 할당하게 된다.