리액트 입문반(카운터 앱)

import React, { useState } from 'react'


function App() {

  const [count, setCount] = useState(0)
  

  return (
    <div style={{textAlign:'center'}}>
      <div>{count}</div>
      <button onClick={() => {
        setCount(count + 1)
      }}>+ 1</button>

      <button onClick={() => {
        setCount(count - 1)
      }}>- 1</button>
    </div> 
  )
}

export default App

+ 1 버튼을 누르면 또는 - 1 버튼을 누르면 렌더링이 되어 새로고침 없이 바로 숫자가 올라가거나 내려가는 코드이다. 

 

const [count, setCount] = useState(0) 을 통해 count의 초기값을 0으로 맞춰줬고, {count}을 사용해 현재 count를 렌더링했다. 

 

+ 1 버튼과 - 1 버튼을 각각 만들어서 onClick 이벤트와 화살표 함수를 사용해 버튼을 누를때마다 setCount(count + 1)을 하게했다. 

 

count를 제어할 수 있는 방법은 오로지 setCount 뿐이라고 이해하면 된다.