<script type="text/babel">
function Button({ props }) {
console.log({ props });
return <button className="button" {...props} />;
}
const element = (
<>
<Button className="button" style={{ borderRadius: 30 }}>
Green
</Button>
<Button className="button blue">blue</Button>
<Button className="button dark">dark</Button>
<Button className="button green">Green</Button>
<Button className="button purple">purple</Button>
<Button props="button purple">purple</Button>
</>
);
ReactDOM.render(element, document.getElementById("root"));
콘솔에 props 는 Button 그린, 블루, 다크,크린 퍼플 전부 undefiend 나오다
제일 마지막 props 만 button purple 로 나오다 ->중괄호 없애고 props로 해야함
function Button(props) {
console.log({ props });
return <button className="button" {...props} />;
}
const element = (
<>
<Button className="button" style={{ borderRadius: 30 }}>
Green
</Button>
<Button className="button blue">blue</Button>
<Button className="button dark">dark</Button>
<Button className="button green">Green</Button>
<Button className="button purple">purple</Button>
</>
);
<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/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<style>
.button {
background-color: #4caf50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.blue {
background-color: #008cba;
}
.dark {
background-color: #213035;
}
.green {
background-color: #28a024;
color: black;
}
.purple {
background-color: #653175;
}
</style>
<script type="text/babel">
function Button({ className = "", style, ...rest }) {
return (
<button
className={`button ${className} `}
style={{ fontSize: 30, backgroundColor: "pink", ...style }}
{...rest}
/>
);
}
const element = (
<>
<Button
style={{ borderRadius: 30, fontSize: 20, backgroundColor: "red" }}
>
Green
</Button>
<Button className="blue">blue</Button>
<Button className="dark">dark</Button>
<Button className="green">Green</Button>
<Button className="purple">purple</Button>
</>
);
ReactDOM.render(element, document.getElementById("root"));
</script>
element 함수 호출하면 Button 컴포넌트 호출한다. children은 Green blue dark Green purple
className 이 없는 컴포넌트호출태그는 기본으로 button을 받는다. 동시에 Button컴포넌트에서 받는 className을 적는다. style은 있는건 첫번째 Button 태그, 나머지는 undefiend
...rest 는 children의 집합이다 <button/ㅇ>태그에 style에 배경색상을 pink로 주면 모두가 pink로 변한다, 단 style 에 이미 배경색상을 넘긴 Button 태그가 있다면 style로 넘어가서 뒤에서 덮어쓰기가 된다.