Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
};
function App(){
return(
/*사용자가 보게 될 컴포넌트*/
<div>
<Btn text = "Save Changes" fontSize={18}/>
<Btn text={14} fontSize={"Continue"}/>
</div>
);
}
ui에서는 오류를 확인할 수 없지만 propTypes를 사용하면 경고문 확인 가능
우리의 컴포넌트가 어떤 prop을 받는지 검사하는게 가능해짐
fontSize: PropTypes.number.isRequired
컴포넌트가 어떠한 prop들만을 정확히 갖고 렌더 될 것이라는 걸 확실히 하고 싶다면 .isRequired 사용
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/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 = 16}){
return (
<button style={{
backgroundColor : "tomato",
color: "white",
padding: "10px 20px",
borderRadius : 10,
border : 0,
fontSize : fontSize
}}> {text}
</button>
);
}
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number
};
function App(){
return(
/*사용자가 보게 될 컴포넌트*/
<div>
<Btn text = "Save Changes" fontSize={18}/>
<Btn text={14} fontSize={"Continue"}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
복붙하는 대신에 어떤 prop들을 받을 수 있는 Btn 컴포넌트 생성
prop들은 우리가 인자를 통해 컴포넌트에 데이터를 보내기 위한 수단.
렌더링 되고 있는 Btn 컴포넌트의 부모로부터 전달되고 있는 것.
주의사항!
컴포넌트에서 prop name?
prop 전달할 때의 이름과 받아서 사용할 떄의 이름 동일해야만 함.
오브젝트로부터 요소를 받아내는 짧은 코드
props.~~~으로 잘 안씀. 이거보다 더 편한게 있는데 굳이 쓸 필요 없음
'FE > React & TS' 카테고리의 다른 글
[REACT] component / state / useEffect (0) | 2023.05.08 |
---|---|
[REACT] create-react-app (0) | 2023.05.08 |
[REACT] JSX / setState / converter (0) | 2023.02.15 |
[REACT] Component (0) | 2023.02.07 |
[REACT] JSX (0) | 2023.02.07 |