React : 다양한 프로퍼티 사용

React에서는 프로퍼티를 이용해서 상위 콤포넌트에서 하위콤퍼넌트로 값을 전달한다.

이대 다양한 자료구조를 사용하는데 

prop-types라는 리액트 라이브러리를 이용해서 변수를 설정할 수 있다.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ChildComponent extends Component {
    render() {
        const {
            boolValue,
            numValue,
            arrayValue,
            objValue,
            nodeValue,
            funcValue,
        }=this.props;
        return (
            <div>
                <span>불리언값: {boolValue}</span>
                <span>숫자값: {numValue}</span>
                <span>배열값: {arrayValue}</span>
                <span>객첵밧: {objValue}</span>
                <span>노드값: {nodeValue}</span>
                <span>함수값: {funcValue}</span>
            </div>
        );
    }
}
ChildComponent.propTypes={
    boolValue : PropTypes.bool,
    numValue:PropTypes.number,
    arrayValue:PropTypes.arrayOf(PropTypes.number),
    objValue:PropTypes.object,
    nodeValue:PropTypes.node,
    funcValue:PropTypes.func,
}

export default ChildComponent

import React, { Component } from 'react';
import './App.css';
import ChildComponent from './03/ChildComponent'
class App extends Component {
  render() {
    return (
      <ChildComponent
      boolValue={true}
      numValue={1}
      arrayValue={[1,2,3]}
      objValue={{name:'제목', age:30}}
      nodeValue={<h1>shem</h1>}
      funValue={()=>{console.log('메시지')}}>

      </ChildComponent>
    );
  }
}

export default App;

 

두번째는 객체안의 설정하는 방법.

shape이라는 내장 라이브러리를 이용

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ChildComponent2 extends Component {
    render() {
        const{
            objValue,
            requiredStringValue,
        }=this.props;
        return (
            <div>
                <div>객체값: {String(object.entries(objValue))}</div>
                <div>필수값: {requiredStringValue}</div>
            </div>
        );
    }
}
ChildComponent2.propTypes={
    //객체 프로퍼티
    objValue:PropTypes.shape({
        name:PropTypes.string,
        age:PropTypes.number,
    }),
    requiredStringValue:PropTypes.string.isRequired,
}

export default ChildComponent2;