만약 prop를 잘못 넘겨준다면..
<!DOCTYPE html>
<html lang="ko">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.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 type="text/babel">
const root = document.getElementById("root");
function Btn({text, fontSize}) {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
radius: "999px",
border: "none",
borderRadius: "999px",
fontSize
}}>{text}</button>
}
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={14} fontSize={"Continue"}/>
</div>
);
}
ReactDOM.render(<App />, root)
</script>
</html>
분명 잘못된 로직.. but 코드상 오류는 없어 버튼이 이상하게 노출됨
->propType은 어떤 prop를 받고 있는지 체크해줌
propsType
<!DOCTYPE html>
<html lang="ko">
<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/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Btn({text, fontSize}) {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
radius: "999px",
border: "none",
borderRadius: "999px",
fontSize
}}>{text}</button>
}
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
};
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={14} fontSize={"Continue"}/>
</div>
);
}
ReactDOM.render(<App />, root)
</script>
</html>https://unpkg.com/prop-types@15.7.2/prop-types.js추가 후,
https://unpkg.com/react@17.0.2/umd/react.production.min.js ->
https://unpkg.com/react@17.0.2/umd/react.development.js 로 변경함..
경고문이 노출됨
isRequired
- 반드시 prop가 존재해야 하는 경우
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number.isRequired,
};
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={"Continue"}/>
</div>
);
}
경고문이 출력
그냥 기록용!!!