prop 끝마치기
<!DOCTYPE html>
<html lang="en">
<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.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">
//우리가 prop Type을 설치함으로서 우리의 컴포넌트 이름을 가져와서
///Btn.propTypes = {}하여 props의 타입이 무엇이고 어떤 모양이어야 하는지를 설명해줄 수 있다.
function Btn({ text, fontSize }) {
//팀원의 실수를 방지하기 위해 설정을 추가해 줄 것이다.
//할 것:user가 prop로 fontSize를 전달할 수 있도록 해 볼 것이다.
return (
<button
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
fontSize,
}}
>
{text}
</button>
);
}
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
//이렇게 설정해주면 최소한의 경고 문구를 볼 수 있다.
//Text는 number아자먼 Btn은 string을 원한다 !
};
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text="Save Changes" fontSize={"18"} />
//나의 팀원이 만약 text prop에 string 타입을 보내는 대신에 숫자를
넘겨준다? //fontSize= 처럼 text를 보낸다면.. 문법상 오류가 없기 때문에
리액트에서는 그냥 넘어가진다 // 만약 리액트가 우리에게 실수하고
있다라고 말해준다면 얼마나 편할까..? //문제는 리액트가 무엇을 원하는지
모른다는 것이야. //PropType은 내가 어떤 타입의 prop를 받고 있는지
체크해줄 수 있다.
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
React JS에서 PropType으로 지정해준 후 다른 type을 적었을 경우
코드는 유효하므로 UI상의 에러는 없다. 단지 경고 메세지만을 추가해 줄 뿐이다.
isRequired
<!DOCTYPE html>
<html lang="en">
<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.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">
function Btn({ text, fontSize = 12 }) {
//그리고 우리는 기본값을 설정할 수 있다. Javascript 문법의 힘이다.
return (
<button
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
fontSize,
}}
>
{text}
</button>
);
}
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
//isRequried를 추가해줄 수도 있다.
//언제든지 누군가가 이 Btn을 렌더링한다면 무조건 text는 포함되어 있을 것이다.
};
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text="Save Changes" />
//fontSize 전달하는 것을 필수가 아니므로 전달하지 않으면 //기본 값인
12로 설정된다. text를 보내지 않는다면 버튼은 망가질 것
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
최강 프론트엔드 개발자가 되고싶은 안유진 입니다