Props 사용해보기
<!DOCTYPE html>
<html lang="ko">
<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">
const root = document.getElementById("root");
function Btn(props) {
console.log(props);
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
radius: "999px",
border: "none",
borderRadius: "999px"
}}>{props.banana}</button>
}
function App() {
return (
<div>
<Btn banana="Save Changes" />
// Btn({banana:"save changes})와 동일함
<Btn banana="Continue" />
</div>
);
}
ReactDOM.render(<App />, root)
</script>
</html>
- ReactJS는 자동으로 property(prop)들을 object안에 넣음. object를 함수에 전달
<Btn banana="Save Changes" x="false"/>이렇게 넣어주면...
- props를 모두 갖는 object를 가지게 됨
shortcut 방법
function Btn({banana}) {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
radius: "999px",
border: "none",
borderRadius: "999px"
}}>{banana}</button>
}- props를 object에서 꺼낼 수 있음
style로 응용해보기..
function Btn({banana, big}) {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
radius: "999px",
border: "none",
borderRadius: "999px",
fontSize: big ? 18 : 16
}}>{banana}</button>
}
function App() {
return (
<div>
<Btn banana="Save Changes" big={true}/>
<Btn banana="Continue" />
</div>
);
}
그냥 기록용!!!