코드네임 :
React -4 Props 본문
흠 중간에 ?? 한 부분있어서 지피티한테 무러봣긔
바로 이해함 굿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
//function Btn(props) {
//~
//{props.text}
//}
///shortcut으로 아래와 같이도 쓸수 있음
function Btn({ text, changeValue, fontSize = 8 }) {
console.log(text, "was rendered");
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
fontSize: fontSize,
}}
>
{text}
</button>
);
}
//// 느려짐 방지? 딱 변경되는 놈만 렌더링 되네
// const MemorizedBtn = React.memo(Btn);
//React에세 prop의 type이 뭔지 설명해줄수 있음
// 다른 타입으로 render시 에러 뜸
// 예를 들어 저기 아래서 fontSize={18} 말고 fontSize={"aaa"} 로 했다면 에러남
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
}
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue1 = () => setValue("Revert CHanges");
return (
//위에 html태그<>안에 onClick={}을 넣으면 이건 이벤트리스너지만,
//커스텀 컴포넌트< />에 onClick={}을 넣는다면 이건 이벤트리스너가 아니고 그냥 Prop의 이름일 뿐
<div>
<Btn text={value} changeValue={changeValue1} />
<Btn text="Continue" fontSize={18} />
</div>
// <div>
// <MemorizedBtn text={value} changeValue={changeValue1} />
// <MemorizedBtn text="Continue" />
// </div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
'🖥️Frontend > React' 카테고리의 다른 글
| React - 6 ToDoList (0) | 2025.03.17 |
|---|---|
| React - 5 useEffect (0) | 2025.03.16 |
| React -3 State (0) | 2025.03.11 |
| React -2 (0) | 2025.03.11 |
| React - 1 (1) | 2025.03.10 |