count 함수를 state 방식으로 만들어보기

[seonae-j]

기존 클래스 컴포넌트를 활용하여 만들기

// 02-01-counter-let-docummnet

export default function CounterLetDocumentPage(){
  // js 코드 만들기
  function onClickCountUp() {
    const count = Number(document.getElementById("qqq").innerText) + 1
    document.getElementById("qqq").innerText = count
  } 
  
  function onClickCountDown() {
    const count = Number(document.getElementById("qqq").innerText) - 1
    document.getElementById("qqq").innerText = count
  }

  return (
    <div>
      <div id="qqq">0</div>
      <button onClick={onClickCountUp}>카운트 올리기!!!</button>
      <button onClick={onClickCountDown}>카운트 내리기!!!</button>
    </div>
  )
}

State 를 사용하여 count 함수 만들기

// 02-01-counter-state
import {useState} from 'react'

export default function CounterLetDocumentPage(){
  // let count = 0 // let은 리액트 전용 html에서 변경을 감지하지 못함(따라서, state를 사용해야 함)
  const [count, setCount] = useState(0)

  // js 코드 만들기
  function onClickCountUp() {
    setCount(count + 1)
  } 
  
  function onClickCountDown() {
    setCount(count - 1)
  }

  return (
    <div>
      <div >{count}</div>
      <button onClick={onClickCountUp}>카운트 올리기!!!</button>
      <button onClick={onClickCountDown}>카운트 내리기!!!</button>
    </div>
  )
}