[React] PropsDataType/자료형 타입 확인

PropsDataType
좀 더 정확한 데이터를 다루기 위해 필요한 자료형

 

자바 스크립트에서는 자바 언어와 같이 자료형을 따로 선언하는 것이 아니기 때문에, 값을 보고 데이터의 형태를 파악한다.

이 때 이 자료형을 명확히 하고 싶다면 자식에서 값을 받을 때 해당 자료형을 지정해 줄 수 있다.

 

[App.js]

import './App.css';
import PropsDataType from './PropsDataType';

function App() {
  return (
    <div className="App">
    <PropsDataType
      /* 각 각 띄어쓰기 혹은 줄바꿈으로 분리해야 사용해줘야 함. 아래는 전부 줄바꿈 진행 */
        String="react"
        Number={501}
        Boolean={1==1} /* true를 넘기는 것 */
        Array={[1,2,3]}
        ObjectJson={{react:'리액트', version:501}}
        function={console.log("FunctionProps:function!")}
      />
    </div>
   );
}

export default App;

 

[PropsDataType.js]

import dataType from 'prop-types'; //(1)

function PropsDataType(props){
    let {String, Number, Boolean, Array, ObjectJson, Function} = props;

    return(
        <>
            <p>StringProps : {String}</p>
            <p>NumberProps : {Number}</p>
            <p>BooleanProps : {Boolean.toString()}</p>
            <p>ArrayProps : {Array.toString()}</p>
            <p>ObjectJsonProps : {JSON.stringify(ObjectJson)}</p>
            <p>FunctionProps : {Function}</p>
        </>
    )
}

PropsDataType.propTypes = { // (2)
    String:dataType.string,
    Number:dataType.number,
    Boolean:dataType.bool,
    Array:dataType.array,
    ObjectJson:dataType.object,
    function:dataType.func
}

export default PropsDataType;

(1) 자료형 선언을 위해 'prop-type'(기본 내장 패키지; 유효성을 검증에 콘솔에 경고 메시지를 보여줌)을 import해서 사용해야 함

(2) PropsDataType.js의 자료형을 선언해 주기에 PropsDataType.propTypes={}에 자료형을 정의해 주어야 함

 

* Boolean은 bool, function은 func로 축약되어 있음

 

---

 

이 중 Boolean 타입은 기억해두어야 할 것이 있는데,

그것은 값을 지정해주지 않고 변수명만 가지고 갈 경우 Boolean의 true가 디폴트 값이 된다는 점이다.

 

[App.js]

import './App.css';
import PropsDataType from './PropsDataType';

function App() {
  return (
    <div className="App">
    <PropsBoolean 
        BooleanTrueFalse = {false}
      />
      <PropsBoolean BooleanTrueFalse/> 
    </div>
   );
}

export default App;

 

[PropsBoolean.js]

function PropsBoolean({BooleanTrueFalse}){
    return(
        <>
            {BooleanTrueFalse ? "2. " : "1. "} 
            {BooleanTrueFalse.toString()}<br/>
        </>
    )
}

export default PropsBoolean;

 

App.js로부터 BooleanTrueFalse를 가져오는데, 출력값은 아래와 같다.

1. false
2. true

결과를 통해 첫번째에는 false로서 값을 지정해 주어 false가 나오지만,

값을 지정해주지 않고 변수만 보낸 경우에는 기본으로 true값이 들어간다는 점을 알 수 있다.