Prop Types
프롭타입 검사해주는 기능
- 스크립트 추가
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
- 프롭타입 지정
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
}
타입이 맞지 않으면 error
- 전체 코드
<body>
<div id="root">
</div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <!-- react 임포트 -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <!-- react-dom 임포트 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script type="text/babel">
function Btn({ text, fontSize }) {
return <button
style={{
backgroundColor: 'tomato',
color: 'white',
padding: '10px 20px',
border: 0,
borderRadius: 10,
fontSize : fontSize
}}
>{text}</button>
}
const MemorizedBtn = React.memo(Btn);
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
}
function App() {
return (
<div>
<MemorizedBtn text='저장' fontSize={20}/>
<MemorizedBtn />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>'React' 카테고리의 다른 글
| [React 영화 서비스 만들기] useEffect (4) | 2024.07.09 |
|---|---|
| [React 영화 서비스 만들기] 프로젝트 생성 (0) | 2024.07.08 |
| [React 영화 서비스 만들기] Memo (1) | 2024.07.08 |
| React | 포트 변경하기 (0) | 2023.12.09 |
| React | 프로젝트 시작하기 (0) | 2023.12.09 |