PropTypes

 

PropTypes

- prop에 잘못된 값을 입력했을 때, 사용자에게 잘못했다는 것을 알려줄 수 있습니다.

- isRequired : 값을 입력해야만할 때 사용합니다.

- 단, TypeScript를 사용한다면 이것을 사용하지 않아도 됩니다.

import propTypes from 'prop-types';

function Btn({text, changeValue, fontSize}) {
  return <button 
    onClick={changeValue}
    style={{
      backgroundColor: 'orange',
      borderRadius: 30,
      padding: '23px 21px',
      fontSize
  }}>
    {text}
  </button>
}

Btn.propTypes = {
    text: propTypes.string,
    fontSize: propTypes.number,
}
function App() {
  let [value, setValue] = React.useState('Save Control');
  const changeValue = () => setValue('Reverse Changes');
  return (
    <div>    
      <Btn text={value} changeValue={changeValue} fontSize={18}/>
      <Btn text='Continue' fontSize='hi'/>
    </div>
  );
}
const root = document.getElementById('root');
ReactDOM.render(<App />, root);