[React] propTypes

해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

---

propTypes의 역할

1. prop validation : props가 원래 역할을 하고 있는지, 빠져있는지 확인 가능
2. documentation : props에 대한 설명, 컴포넌트와 props의 관계, 사용에 대한 이해를 도와줌

propTypes 사용법

먼저 라이브러리 import 필요

import PropTypes from 'prop-types';

그리고 컴포넌트 정의 하단에 propTypes 정의하기

import React from 'react';
import PropTypes from 'prop-types';

export class MessageDisplayer extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}

MessageDisplayer.propTypes = {
  message: PropTypes.string
};

객체 형식으로 한 prop 당 하나의 propTypes 할당

추가 기능

형식의 종류

• string
• object
• bool
• number
• func
• array
  등

.isRequired

message: PropTypes.string.isRequired
→ prop이 지정되지 않은 경우 오류 메시지 표시

함수형 컴포넌트

함수형 컴포넌트의 경우
: 컴포넌트 선언부 이후에 쓴다

// Functional Component의 경우도 propTypes 사용 가능

import React from "react";
import PropTypes from "prop-types";

const MessageDisplayer = ({ message }) => <h1>{message}</h1>;

MessageDisplayer.propTypes = {
  message: PropTypes.string
};

MessageDisplayer.defaultProps = {
  message: "Hi, Welcome."
};

export default MessageDisplayer;