- 어떤 props든 btn컴포넌트에 보내면 그것들은 Btn컴포넌트의 첫번째 인자속으로 들어감
- props는 첫번째이자 Btn이 전달받는 유일한 인자
- props는 우리가 보낸 모든 것들을 받는 오브젝트
- 아래 두개는 똑같음
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text, big}) {
console.log(text, big);
return (<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: big? 18:16,
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true}/>
<Btn text="Continue" big={false}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>'리액트 기기기초' 카테고리의 다른 글
| #4.2 Prop Types (0) | 2023.03.08 |
|---|---|
| #4.1 Memo (0) | 2023.03.08 |
| #3.9 Final Practice and Recap (0) | 2023.03.07 |
| #3.8 Recap (0) | 2023.03.07 |
| #3.7 State Practice part Two (0) | 2023.03.05 |
