React JS

PropTypes

수연 (Suyeon) 2022. 2. 7. 23:35
반응형

 

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);
728x90

'React JS' 카테고리의 다른 글

create-react-app 사용해서 만들어보기  (0) 2022.02.09
node js로 React App 만들기  (0) 2022.02.08
React state 사용 방법  (0) 2022.02.06
JSX  (0) 2022.02.06
React JS를 배워야 하는 이유  (0) 2022.02.06