버튼을 눌러서 숫자가 변하는 카운팅 만들어보기

// src/App.js

import React from "react";
import { useState } from "react";
import { flushSync } from "react-dom";

function App(){
  const [num, setNum] = useState(0)
  // 1. 리턴문 위에서 만들어서 사용하는 방법
  const plusButton = () =>{
    const newNum = num + 1
    setNum(newNum)
  }
  
  return(
    <div>
      <div>
        지금 카운팅 되는 숫자 == {num}
      </div>

      <br />
<br />

{/* 1-1 위에서 만들어놓은 함수로직을 사용만 하기 */}
      <button onClick={plusButton} > + 함수버튼 </button>

{/* 2. 리턴문 안 - 태그 안쪽에서 함수 추가해서 실행하는 방법 */}
      <button onClick={()=>{
        const newNum = num - 1
        setNum(newNum)
      }} > - 함수버튼 </button>

<br />
<br />

{/*  3. 가장 심플하게 구현한 버튼 */}
<button onClick = {() => setNum(num + 1)}>심플 + 버튼</button>
<button onClick = {() => setNum(num - 1)}>심플 - 버튼</button> 
      
    </div>
  )
}

export default App;

구현하고자 하는것은 간단합니다.

• 버튼과 - 버튼을 만들고 useState 를 사용해서 간단한 카운팅앱을 만드는 것인데요,

총 3가지 방법으로 만들수 있고 각자 수행하고자 하는 목적은 동일하지만 구현하는 방법에 차이를 두고

3가지 형태로 구현을 해보았습니다.