REACT_props 객체형

props 객체형

 

props 값을 객체로 하위 컴포넌트에 전달할 경우, 자료형을 object로 선언

하지만 객체 형태(객체 내부 변수들)의 자료형을 선언할때는 shape이라는 유형을 사용한다

 

 

 

- R020_PropsObjVal.js

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

class R020_PropsObjVal extends Component {
    render() {
        let {
            Object
        } = this.props
        return(
            <div style={{padding : "0px"}}>
                {JSON.stringify(Object)}
            </div>
        )
    }
}

R020_PropsObjVal.propsTypes = {
    Object:datatype.shape({
        react:datatype.string,
        twohundred:datatype.number
    })
}
export default R020_PropsObjVal;

 

 

-App.js

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

import PropsObjVal from './R020_PropsObjVal.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <PropsObjVal Object={{react:"리액트", twohundred:"200"}}/>
    </div>
  );
}

export default App;

 

 

결과