이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다.
props를 사용하다 보면 실수로 잘못된 타입으로 props를 전달할 수 있다.
하지만 이러한 실수를 리액트는 알 수 없다.
이러한 문제를 예방하고자 리액트 팀이 개발한 PropTypes라는 이름의 패키지를 사용할 수 있다.
PropTypes는 우리가 어떤 타입의 prop을 사용하고 있는지 체크해준다.
PropTypes를 사용하기 위해 다음 코드를 추가해 준다.
PropTypes를 추가한 코드
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="https://unpkg.com/mvp.css" /> -->
</head>
<body>
<div id="root"></div>
</body>
<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>
<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, changeValue, fontSize }) {
console.log(text, "was rendered");
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize,
}}
>
{text}
</button>
);
}
Btn.propTypes = {
text: PropTypes.string,
fontSzie: PropTypes.number,
};
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} changeValue={changeValue} fontSize={18} />
<Btn text="Continue" />
</div>
);
}
ReactDOM.render(<App />, root); // App을 root 안에 랜더링
</script>
</html>propTypes를 사용해 원하는 prop의 타입을 지정할 수 있다.
결과 화면
propTypes에 관한 자세한 설명은 다음 문서를 참고 바란다.
https://www.npmjs.com/package/prop-types
prop-types
Runtime type checking for React props and similar objects.. Latest version: 15.8.1, last published: 7 months ago. Start using prop-types in your project by running `npm i prop-types`. There are 50380 other projects in the npm registry using prop-types.
www.npmjs.com
최종 코드
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="https://unpkg.com/mvp.css" /> -->
</head>
<body>
<div id="root"></div>
</body>
<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>
<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, changeValue, fontSize = 16 }) {
console.log(text, "was rendered");
return (
<button
onClick={changeValue}
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() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} changeValue={changeValue} fontSize="string" />
<Btn text="Continue" />
</div>
);
}
ReactDOM.render(<App />, root); // App을 root 안에 랜더링
</script>
</html>
Btn 함수의 파라미터에서 fontSzie = 16은 두 번째 Btn에서만 사용될 것이다.
왜냐하면 fontSize가 prop으로서 설정되지 않았기 때문이다.
