PropType을 설치해서 React에게 prop들의 타입이 무엇인지 명시해주도록 하겠습니다. 그러면 prop의 타입을 잘못 입력했을 시에 리액트는 경고메세지를 출력합니다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
/* PropType설치 */
<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,
}}>
{text}
</button>
)
}
Btn.propTypes={
text:PropTypes.string.isRequired,
fontSize: PropTypes.number,
}
function App () {
return (
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={14} fontSize={"Continue"}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root)
</script>
</html>결과
경고메세지 출력
'프론트엔드 > ReactJS 시작하기' 카테고리의 다른 글
| [React] 간단한 to-do-list 만들기 (0) | 2023.04.15 |
|---|---|
| [React] Create React App - CSS (0) | 2023.04.13 |
| [React] props(2) (0) | 2023.04.11 |
| [React] props(1) (0) | 2023.04.11 |
| [React] state와 useState 이해하기 - 단위변환기(2) (0) | 2023.04.11 |
