#07-04. props : isRequired의 사용

propTypes를 지정하지 않았을 때 warning을 발생시키는 작업을 수행하도록 하겠습니다.

방법은 propTypes 작성시 뒷부분에 isRequired를 추가로 작성해주면 해당 기능을 사용할 수 있습니다. 

 

Props.js를 수정합니다.

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        <hr/>
        <div>isRequire Test : {props.isRequireTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
    , isRequireTest : PropTypes.string.isRequired
};

 

isRequire 값을 입력하지 않아 warning 발생한 결과

 

Apps.js를 수정하여 오류를 제거하도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest="99" isRequireTest="필수값을 넣었습니다.">내가 children이다 </Props>
    </div>
  );
}

export default App;