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로 값이 전달된다.
'코딩 연습 > React' 카테고리의 다른 글
| Component State with this.setState() (0) | 2019.01.10 |
|---|---|
| Array.prototype.map() 활용하기 (0) | 2019.01.07 |
쵸잇