React 정복기(6) - propTypes

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용
propTypes를 지정하는 방법은 defaultProp를 설정하는 것과 유사함
(SQL문법의 Not Null과 형 지정과 유사하다)

propTypes를 사용하기 위해서는 import 구문으로 불러와야 함

propTypes를 테스트 하기 위한 App 컴포넌트

import React from 'react';
import './App.css';
import Puppy from "./Puppy";

function App (){
    return(
        <div>
            <Puppy name={"hyun-mee"} age={33} />
        </div>
    );
}

export default App;

propTypes를 적용한 컴포넌트(함수형)

Puppy.js

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

const Puppy = ({name, age}) => {
    return(
        <div>
            <div>내 강아지 이름은 {name} 입니다.</div>
            <div>내 강아지 나이는 {age} 입니다.</div>

        </div>
    );
}

Puppy.defaultProps = {
    name: 'default puppy'
};

Puppy.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number.isRequired
};

export default Puppy;

propTypes를 적용한 컴포넌트(클래스형)

Puppy.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    render() {
        const {name, age} = this.props;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
            </div>
        );
    }
}

Puppy.defaultProps = {
    name: 'default puppy'
};

Puppy.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number.isRequired
};

export default Puppy;

Puppy 컴포넌트를 불러오는 부분에 name prop의 타입에 string이 아닌 다른 타입이 들어오면 크롬의 개발자 도구의 console에 오류 메세지가 표시되며, age 속성이 넘어오지 않는 경우에도 오류 메세지가 표시됨

클래스형 컴포넌트에서는 defaultProps와 propTypes를 설정할 때 class 내부에서 지정 가능함

defaultProps, propTypes를 내부지정한 컴포넌트(클래스형)

Puppy.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
            </div>
        );
    }
}

export default Puppy;