Props 자료형 선언하기

Props 자료형 선언하기

자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교한다. 이 때, 자료형이 일치하지 않는다면, 경고 메시지로 알려주기 때문에 잘못된 데이터를 확인할 수 있다.

 

예제코드

App.js

import React from 'react';
import './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;

R018_PropsDatatype.js

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

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 JsonProps: {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;

코드해설

Line 6~8

• render() 함수 내에서 지역 변수를 선언해 props로 전달된 값들을 할당한다.

Line 22~29

• props 값들 각각에 적합한 자료형을 선언한다.
• line23에서 문자열 유형인 props.String 변수의 자료형을 number로 선언해 경고 메시지가 발생할 수 있도록 한다.
• 경고 메시지는 개발자 도구 콘솔창에서 확인할 수 있다.
• porps의 자료형 선언을 위해 line2에서 리액트 기본 내장 패키지인 prop-types를 임포트해 사용했다. propTypes가 데이터 유효성 검증을 하고 콘솔에 경고 메시지를 출력한다.

Line 11~16

• 부모 컴포넌트에서 전달한 props 변수들을 화면에 표시한다. line11의 String 변수는 line23에서 자료형이 일치하지 않는다.
• 하지만 에러가 아닌 경고 메시지이기 때문에 화면에 String변수가 정상적으로 표시된다.

결과화면