nomad code_react js로 영화앱 만들기_#4.2
2022. 11. 14. 15:05ㆍreact
PropTypes : 각 컴포넌트의 인자값의 속성을 체크
<body>
<div id="root"></div>
</body>
<!-- react_개발자모드 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- react_propTypes -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<!-- babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
fucntion Btn({text, fontSize}){
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize // 인자값과 속성명이 동일한 경우 한번만 써도 적용됨
}}
>
{text}
<button>
};
// 컴포넌트 Btn의 인자값 속성 지정
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number
};
function App(){
return(
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text={14} fontSize="Continue" />
</div>
);
};
</script>(*주의 : 일반 production으로는 propTypes를 인식할 수 없으므로 development로 사용해야 함)
위의 내용대로면 컴포넌트 Btn의 인자값 text는 문자, fontSize는 숫자가 적용되어야 한다.
하지만 두번째 Btn의 text는 숫자, fontSize는 문자가 들어가있고 이는 문법상으로는 오류가 아니라 출력은 되지만 propTypes에 의해 콘솔창에 오류가 뜬다.
function App(){
return(
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text="Continue" fontSize = {18} />
</div>
);
};지정한 타입으로 수정하면 오류는 사라진다.
필수로 입력되어야 하는 인자값을 지정하고 싶은 경우에도 propTypes를 사용할 수 있다.
만약, text와 fontSize가 필수 인자값으로 들어가야 한다면 isRequired를 붙여주면 된다.
function Btn({text, fontSize = 14}){ // fontSize 인자값이 없을 경우 14px로 적용됨
<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 />
</div>
);
};text를 필수 값으로 지정한 경우, 두번째 컴포넌트 Btn처럼 인자값이 아무것도 없을 때 윈도우창에는 오류가 없이 잘 출력되지만 콘솔창에 오류가 생긴다.
'react' 카테고리의 다른 글
| nomad code_react js로 영화앱 만들기_#5.1 (0) | 2022.11.15 |
|---|---|
| nomad code_react js로 영화앱 만들기_#5.0 (create-react-app) (0) | 2022.11.14 |
| nomad code_react js로 영화앱 만들기_#4.1 (0) | 2022.11.11 |
| nomad code_react js로 영화앱 만들기_#4.0 (0) | 2022.11.11 |
| nomad code_react js로 영화앱 만들기_#3.9 (0) | 2022.11.09 |