[React] useState로 카운트 앱 만들기

useState

• 변수와는 상관없이 state가 업데이트 되면 UI 렌더링 해줌(실시간 or 주기적 렌더링이 필요한 UI)\
• 리액트에서 제공하는 함수 중 하나. 리액트 Hook이라고 함.
• array를 반환함.
• count2-> 초기값을 담고 있는 state 함수.
• setCount2-> count2 값을 바꿀 수 있도록 도와주는 함수 (비동기적. 함수가 다 끝나고 실행됨. 한박자 느리다.)

const [count2, setCount2] = useState(0)

 

App.js

import { useState } from 'react'; // useState Hook을 불러줌
import './App.css';

function App(){
  let count = 0;
  const [count2, setCount] = useState(0) 
  // count2: 초기값을 담고있는 state 함수
  // setCount: count2 값을 바꿀 수 있도록 도와주는 함수 (비동기적. 함수가 다 끝나고 실행됨. 한박자 느리다.)
  // useState(0): 괄호 안에 초기값을 넣어줌(함수가 끝나면 초기화됨. 해서 변수는 잠깐 저장해놓는 값들만 쓰기)
  
  const increase = () => {
    console.log('count:',count+=1, 'count2:', count2)
    setCount(count2+1)
  }
  return(
    <>
      <div>{count2}</div>
      <button onClick={increase}>버튼</button>
    </>
  )
}
export default App;