1.리액트는 파라미터를 잘 못 넘겨도 확인할 수 없는 문제점이 존재한다.
2. 이런 문제를 줄이기 위해서 PropTypes라는 모듈의 도움을 받을 수 있다.
3. type과 다르게 입력 돼었을 경우 warning을 뜨게 할수 있고, parameter 에 값을 넣지 않는 경우 경고 메시지를 띄울수 있다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js "></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<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 = 16}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: fontSize,
}}
>
{text}
</button>
);
}
Btn.propTypes = { //타입지정
text: PropTypes.string.isRequierd,
fontSize: PropTypes.number,
}
function App() {
return (
<div>
<Btn text="Save Change" fontSize={18}/>
<Btn />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>'리액트 기기기초' 카테고리의 다른 글
| #5.1 Tour of CRA (0) | 2023.03.08 |
|---|---|
| #5.0 Introduction (0) | 2023.03.08 |
| #4.1 Memo (0) | 2023.03.08 |
| #4.0 Props (0) | 2023.03.08 |
| #3.9 Final Practice and Recap (0) | 2023.03.07 |
