Props
- 부모 컴포넌트(App)로부터 자식 컴포넌트(Btn)에 데이터를 보낼 수 있게 해주는 방법
- button에 style을 주고 싶은데, 만드는 컴포넌트마다 style 복붙해서 넣지 않고 독립된 컴포넌트를 새로 만들어 활용하기
- 컴포넌트의 매개변수로 props 넣으면, 밑에 App에서 컴포넌트 호출 시 넣은 모든 것을 갖는 오브젝트가 됨
-> 버튼 글씨 대신 {props.banana}
--> 재사용 가능하게 만들음
// Btn({banana:"Save Changes"})
// 또는 매개변수로 {banana}하여 오브젝트로 받고 여기서 {banana}해주기
※ component = function
✏️ eventListener와 props의 차이
- html 요소 안에 onClick={}하면 eventListener
- App 안에 return되는 컴포넌트로 onClick={} 넣으면 props
✏️ React Memo
- App 컴포넌트 다시 불러올 때, 이전과 props가 바뀐것이 없는 컴포넌트는 re-render되는 것을 원치 않음
const MemorizedBtn = React.memo()- MemorizedBtn은 기억하고 있는 Btn 컴포넌트가 된다
- 기억을 해서 부모가 state 변화가 있으면 자식에서 re-render됨.
PropType
- 어떤 타입의 prop를 받고 있는지 체크해줌
- 타입이 잘못되면 warning
- props의 타입이 무엇이고 어떤 모양이어야 하는지 설명
Btn.propTypes = {
<!--(props이름) : PropTypes.(type)-->
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
} - 꼭 필요한 props라면 맨 뒤에 .isRequired 추가
🖥️ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<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.production.min.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, onClick, fontSize = 14 }) {
//console.log(text, "was rendered");
return (
<button
onClick={onClick}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: fontSize,
}}
>
{text}
</button>
);
}
//React.memo()
//const MemorizedBtn = React.memo(Btn);
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} onClick={changeValue} fontSize={18} />
<Btn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>