[React] useState 간단예제 카운터

 

React에 useState로 변수의 상태를 변화시킬 수 있는 간단한 예제이다.

import { useState } from 'react';
import './App.css';

export default function App() {
  let count = 0;
  const [count2, setCount2] = useState(0)
  const increase = () => {
    count = count + 1
    //count2 = count2+1
    setCount2(count2 + 1)

    console.log("count work?", count)
    console.log("count2 work?", count2)
  }
  return (
    <main>
      <div>count : {count}</div>
      <div>count2 : {count2}</div>
      <div>setCount2 state : {count2} </div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

 

실행화면

state가 바뀌면 UI가 자동으로 업데이트 되는구나! 새로운 값으로 다시 그려주는구나!

 

Console창

이상하게 count변수는 1 이며

state의 값은 한박자씩 늦게 증가함을 알 수 있다.

 

왜? Why? state의 값은 한박자씩 늦을까?

state

state는 UI를 다시 그려준다. 언제? 함수가 끝나면 업데이트하기 시작한다. (state값이 바로 바뀌는것이 아니다.)

모든UI가 바뀌어야하는 set함수들을 모아서 함수가 끝나면 처리한다.

그말은? 비동기적이다.

state사용할 때 주의사항임으로 잘 기억해두도록 해야한다.

 

count 변수 값은 왜 계속 1일까?

state값이 업데이트 될 때마다 컴포넌트가 다시 실행이 되면서 새로 업데이트 된 UI값을 그려주게 된다.

function을 다시 실행되기 떄문에  let count=0 부터 시작하게 됨으로 다시 초기화 된다.

0->1  0->1 ...값이 누적이 안된다.

 

 

그래서 변수는 잠깐 저장해두는 값으로만 사용하고 나머지는 state로 사용할 것이다.

state의 값은 react가 주시하는 값이다.

state에 있는 값은 저장이 되어있다. 그것이 useState가 하는 일이다. 값을 잃어버리지 않고 기억하고 있다.

 

 

- 참고 -

React랑 Vue는 라이브러리이다.

스벨트는 컴파일러이고

Angular, Flutter 는 프레임워크이다.