Props 객체형으로 사용하기

Props 객체형으로 사용하기

props 값을 객체로 하위 컴포넌트에 전달할 경우, 자료형을 object로 선언한다. 하지만 객체 형태(객체 내부 변수들)의 자료형을 선언할 때는 shape이라는 유형을 사용한다.

 

예제코드

App.js

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

R020_PropsObjVal.js

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

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

R020_PropsObjVal.propTypes = {
  Object: datatye.shape({
    react: datatye.string,
    twohundred: datatye.number
  })
}

export default R020_PropsObjVal;

코드해설

• render() 함수 내에서 지역 변수를 선언해 props로 전달된 값을 할당한다.
• shape 유형을 사용해 객체 변수 Object 의 내부 key 값(react, twohundred)에 대해 자료형을 선언한다. twohundred가 문자열(”200”)로 전달됐지만, 자료형이 number로 선언됐다. 자료형이 일치하지 않아 경고 메시지가 발생한다. 경고 메시지는 개발자 도구 콘솔 창에서 확인할 수 있다.
• Object 객체의 key와 value 값들을 화면에 출력한다.

 

결과화면