2. 버튼 누르면 1 더하기

자바스크립트의 값 사용하기

// App.jsx
function App() {

  let a = 1

  return (
    <>
    {a}
    </>
  )
}

export default App

버튼 사용하기

// App.jsx

function App() {
      function btn1()
      {
        console.log('홍길동 버튼 눌림');
        alert('홍길동입니다.');
      }

      function btn2()
      {
        console.log('나지적 버튼 눌림.');
        alert('나지적입니다.');
      }

  return (
    <>
      <button onClick={btn1}>홍길동</button>
      <button onClick={btn2}>나지적</button>
    </>
  )
}

export default App

useState를 이용해 상태 관리하기

// App.jsx
import { useState } from "react"

function App() {

  const [a, set_a] = useState(0)

  return (
    <>
    <button>1 더하기 : {a}</button>
    </>
  )
}

export default App

버튼 클릭하면 1 더하기

// App.jsx
import { useState } from "react"

function App() {

  const [a, set_a] = useState(0)

  function plus1()
  {
    set_a(a+1)
  }

  return (
    <>
    <button onClick={plus1}>1 더하기 : {a}</button>
    </>
  )
}

export default App

또 하나의 별도로 관리되는 상태 버튼

import { useState } from "react"

function App() {

  const [a, set_a] = useState(0)
  const [z, set_z] = useState(0)

  function plus1()
  {
    set_a(a+1)
  }

  function plus2()
  {
    set_z(z+1)
  }

  return (
    <>
    <button onClick={plus1}>1 더하기 : {a}</button>
    <br />
    <button onClick={plus2}>1 플러스 : {z}</button>
    </>
  )
}

export default App