REACT_props 자료형 선언

-자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 

비교한다. 이때 자료형이 일치하지 않는다면 경고 메시지로 알려주기 때문에 잘못된 데이터를 확인할 수 있다

import React, {Component} from 'react';
import datatype from 'prop-types';
import { data } from 'jquery';

class R018_PropsDatatype extends Component {
    render() {
        let{
            String, Number, Boolean, Array, Object, Function
        } = this.props
        return(
            <div style={{padding: "0px"}}>
                <p>StringProps: {String}</p>
                <p>NumberProps: {Number}</p>
                <span>BooleanProps: {Boolean.toString()}</span>
                <p>ArrayProps : {Array.toString()}</p>
                <p>Object JasonProps : {JSON.stringify(Object)}</p>
                <p>FunctionProps : {Function}</p>
            </div>
        )
    }
}

R018_PropsDatatype.propTypes = {
    String : datatype.number,
    Number : datatype.number,
    Boolean : datatype.bool,
    Array : datatype.array,
    Object : datatype.object,
    Function : datatype.func,
}
export default R018_PropsDatatype;

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import PropsDatatype from './R018_PropsDatatype'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <PropsDatatype
      String="react"
      Number={200}
      Boolean={1==1}
      Array={[0,1,8]}
      Object={{react:"리액트", twohundred:"200"}}
      Function={console.log("FunctionProps : function!")}/>
    </div>
  );
}

export default App;

 

결과