[React] 다양한 자료형 프로퍼티 사용하기

시작

---

리액트에서 프로퍼티에 int형이나 boolean형의 값을 전달할 때는 큰따옴표를 사용할 수 없다.
그냥 큰따옴표에 값을 전달하면 문자형으로 인식이 되어 버린다.
때문에 자료형을 지정하여 프로퍼티를 전달할 수 있는 방법을 소개한다.

import PropTypes from 'prop-types';

먼저 해당 라이브러리를 import 해야한다.
해당 글에서는 ChildComponent라는 임의의 컴포넌트를 만들어 사용했다.

---

객체 구조 분해 할당식 사용

---

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


class ChildComponent extends Component {
    render() {
        const {
            numValue,
            arrayValue,
            objValue,
            nodeValue,
            funcValue,
        } = this.props;
        let bool = '';
        if(this.props.boolValue === true){
            bool = 'true'
        }
        else{
            bool = 'false'
        }
        return (
            <div className='child'>
                <span>불리언값: {bool}</span>
                <span>숫자값: {numValue}</span>
                <span>배열값: {arrayValue}</span>
                <span>객체값: {String(objValue)}</span>
                <span>노드값: {nodeValue}</span>
                <span>함수값: {String(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;

먼저 객체 구조 분해 할당식을 사용하여 프로퍼티로 전달될 값들을 지역 변수로 정의한다.
객체 형태로 자료형을 정의한다.
이제 부모 컴포넌트인 App.js에서 값을 전달할 것이다.

---

import './App.css';
import ChildComponent from './03/ChildComponent';

function App() {
  return (
    <div className="App">
      <ChildComponent
        boolValue = {true}
        numValue = {1}
        arrayValue = {[1, 2, 3]}
        objValue = {{name: '제목', age: 24}}
        nodeValue={<h1>노드</h1>}
        funcValue={() => { console.log('Hello World');}}
      />
    </div>
  );
}

export default App;

각 변수에 자료형에 해당하는 값을 전달했다.
위 코드는 간단한 예제 코드일 뿐이며, 실무에서는 실수를 줄이기 위해 변수에 객체를 담아서 전달하는 방식을 선호한다.

---

결과

---

결과

결과는 다음과 같다.
ChildComponent로 넘긴 값이 잘 전달되는 것을 확인할 수 있다.