[리액트 React] props 객체형 사용 / props 객체형 따라하기 / props object / 함수형 컴포넌트 props 객체형 / 클래스형 컴포넌트 props 객체형

1. App.js 작성하기

import React from 'react';
import './App.css'
import PropsObjVal  from './UsePropsObj';

function App() {
	return(
		<div>
			<PropsObjVal ObjectJson={{name: '뚝딱', type: '1004'}} />
		</div>
	)
}

export default App;

 

 

 

✋🏼 잠깐만, 아래에 보여질 컴포넌트 내용을 확인하기 전에 체크하기

shape()를 사용하여 객체변수 ObjectJson 내부에 있는 key값에 대해 자료형을 선언한다. (name, type)

 

 

 

 

2-1. 클래스형 컴포넌트 UsePropsObj.js 작성하기

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

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

UsePropsObj.propTypes = {
    ObjectJson: datatype.shape({
        name: datatype.string,
        type: datatype.number
    })
}

export default UsePropsObj;

 

 

 

 

2-2 함수형 컴포넌트 UsePropsObj.js 작성하기

import React from 'react';
import datatype from 'prop-types'

function UsePropsObj (props) {
    let {
        ObjectJson
    } = props

    return (
        <div style={{padding: "0px"}}>
            {JSON.stringify(ObjectJson)}
        </div>
    )
}

UsePropsObj.propTypes = {
    ObjectJson: datatype.shape({
        name: datatype.string,
        type: datatype.number
    })
}

export default UsePropsObj;

 

 

 

 

3. 경고 메시지 원인 파악

type의 밸류가 1004(number)가 아닌 '1004'(string)으로 전달 되었는데,

자료형은 number로 되어 있어서 콘송창에 경고 메시지가 보여진다.

 

 

 

 

4. 브라우저 결과 확인

자료형이 일치하지 않아도 화면은 정상적으로 보여진다.

자료형이 틀리면 '에러'가 아닌 단순 '경고 메시지'가 콘솔창에 보여진다는 것을 기억하자.