[20240507] 앱개발 시작하기 #15 | props

# 1

Button.jsx

const Button = (props) => {
    console.log(props)
    return(
    <>
    <button style={{color : props.color}}>
        {props.text} - {props.color.toUpperCase()}
    </button>
    </>
    )
}

Button.defaultProps = {
    color: "black",
}

export default Button;

App.jsx

import './App.css'
import Button from './components/Button'


// root 컴포넌트
function App() {

  return (
    <>
      {/* 자식컴포넌트 */}
      <Button text={"메일"} color={"red"}></Button>
      <Button text={"카페"}></Button>
      <Button text={"블로그"}></Button>
    </>
  )
}

export default App

---

#2

Button.jsx

const Button = ({text,color}) => {
    return(
    <>
    <button style={{color : color}}>
        {text} - {color.toUpperCase()}
    </button>
    </>
    )
}

Button.defaultProps = {
    color: "black",
}

export default Button;

---

#3

import './App.css'
import Button from './components/Button'


// root 컴포넌트
function App() {

  const buttonProps = {
    text: "메일",
    color : "red",
    a : 1,
    b : 2,
    c : 3,
  }

  return (
    <>
      {/* 자식컴포넌트 */}
      <Button {...buttonProps}></Button>
      <Button text={"카페"}></Button>
      <Button text={"블로그"}></Button>
    </>
  )
}

export default App