https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
React는 parameter를 잘 못 넘겨도 확인 할 수 없는 문제점이 존재
-> 이 문제점의 해결방안으로 나온 것이 PropTypes 모듈
React prop-types
- prop의 type이 잘못되었을 때 알려줌 (콘솔창에 warning 띄워줌)
- .isRequired : 필수조건
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--React prop-types-->
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<!--Babel standalone-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//fontSize가 존재하지 않는다면(undefined) 값을 줌
//-> 이건 두번째 Btn에만 발생 (fontSize가 설정되지 않았기 때문)
//-> 이건 javascript 문법임 (react관련 X)
function Btn({ text, fontSize = 12 }) {
console.log(text, "was rendered");
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="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>'Study > React' 카테고리의 다른 글
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - CRA (0) | 2023.01.19 |
|---|---|
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - create react app (0) | 2023.01.18 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - Props (0) | 2023.01.17 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - State Functions (0) | 2023.01.11 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - setState (0) | 2023.01.10 |
