반응형
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 |