리액트 속성값 타입 및 디폴트값 정의하기

각 속성값 타입을 명시하고 필수 여부를 지정하는 것이 생산성에 영향을 끼친다.

하지만 타입스크립트와는 달리 자바스크립트에서는 타입을 지정하는 문법이 없기 때문에 prop-types 패키지를 이용해 속성값에 타입을 지정한다.

prop-types 패키지 설치

yarn add prop-types

각 속성값에 타입 및 디폴트값 지정

name 속성값은 문자열 자료형이고 필수값
age 속성값은 숫자 자료형이고 필수값
region 속성값은 문자열 자료형이고 필수값이 아닐 때 아래와 같이 지정한다

클래스형 컴포넌트일 때

import React from 'react';
import PropTypes from "prop-types";
import 'App.css';

class Person extends React.Component {
    static propTypes = {
        // name은 문자열 자료형이며 필수값이다
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
        region: PropTypes.string,
    }
}

필수값이 아닌 속성에는 디폴트값을 지정할 수 있다.

class Person extends React.Component {
    static propTypes = {
        // name은 문자열 자료형이며 필수값이다
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
        region: PropTypes.string,
    };

    static defaultProps = {
        region: "Seoul"
    };

    render() {
        const { name, age, region } = this.props;
        return (
            <div>
                안녕. 내 이름은 { name }이야. { age }살이고 {region}에 살아.
            </div>
        )
    }
}

함수형 컴포넌트일 때

function Person({ name, age, region }) {
    return (
        <div>
            안녕. 내 이름은 { name }이야. { age }살이고 {region}에 살아.
        </div>
    );
}

Person.defaultProps = {
    region: 'Seoul'
};

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

Published 14 Mar 2021