PropTypes로 데이터 형태 확인하기

PropTypes으로 데이터 형태 확인하기

데이터 형태 확인을 통해 많은 버그를 잡을 수 있다. 우선 객체내 각 요소에 부합하는 propTypes를 할당한다 

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import './Movie.css';

class Movie extends Component {

    // 부모 컴포넌트에서 받은 데이터 형태를 규정하여 이와 다를 경우 에러가 발생한다

    static propTypes = {

        // isRequired는 필수사항으로 지정해준다. 부모컴포넌트에서 값이 없을 경우 오류발생

        title: PropTypes.string.isRequired,

        poster: PropTypes.string,

    }

    render() {

        return(

            <div>

                {/* MoviePoster 컴포넌트에 poster 값을 담아준다 */}

                <MoviePoster poster={this.props.poster} />

                {/* 부모컴포넌트에서 전달 받은 title 값을 출력한다 */}

                <h1>{this.props.title}</h1>

            </div>

        )

    }

}

class MoviePoster extends Component {

   

    // 부모 컴포넌트에서 받은 데이터를 체크하고, 지정한 타입과 다르면 에러 발생

    static propTypes = {

        poster: PropTypes.string.isRequired,

    }

    render() {

        return(

            // 부모컴포넌트인 Movie 컴포넌트에서 전달 받은 poster 값을 출력한다

            <img src={this.props.poster} />

        )

    }

}

export default Movie

객체내 각 요소에 PropTypes를 규정하면 데이터 형태를 확인한 후에 다음 단계로 넘어간다

• PropTypes에는 string, number, bool, func 등 여러 타입을 사용할 수 있다.
• isRequired를 사용하게 되면 해당 요소가 존재하지 않을시 에러를 발생시킨다. 따라서 반드시 요소 값을 입력해야한다.
• PropTypes를 확인하고 유효한 경우에만 this.props.poster로 값이 전달된다.