리액트 : count를 통해 동기/비동기 작동원리 알아보기

function App() {
  const [counter2,setcounter2]=useState(0)
  let counter =0;
  let increase = ()=>{
    counter = counter + 1
    setcounter2(counter2 + 1)
    console.log("counter는",counter , "counter2는 ",counter2)
  }
  
  return (
    <div >
      <div>{counter2}</div>
     <button onClick={increase}>클릭!</button>
    </div>
  );
}

 

버튼을 클릭하면 카운트가 증가하는 프로젝트를 만들었다.

여기서 알아야  할점은 let counter = 0 은변수이고 counter2는 useState를 사용했다는 점이다.

뭐가 다른지 위에 화면에서  볼 수있다.

버튼을 클릭했을때 변수에 담긴 counter은 1이 되었고 counter 2는 증가되지 않은 0 이 되었다.

 

이유는?

state가  바뀌면 UI가 다시  렌더링 된다 (다시 그려줌)

이 작업이 비싸다..

그래서 바로 바뀌는게 아니라 시간이 걸린다. 즉 비동기적으로 작용을 한다.

그래서 위에 함수가 다 끝나야지 실행이 된다.

console.log 를 보았을때는 변하지않는 값이다

왜냐? 함수가 다 끝나지 않았기 때문이다. (비동기 작동원리중 하나)

 

그래서 우리는 state를 쓸때 비동기적이라는걸 알아야한다.

단,  비동기를 해결하기 위해 나오는 유용한 리액트 함수가 있으니 일단 요점만 기억해두자.

 

요약
1. 변수는 값이 바뀌면 바로 UI에 적용이 된다. (동기)
2. state는 비싸기 때문에 리액트에서 바로 바꿔주는게 아니라 함수가 다 끝나서야 실행이 되는 것이다.

 

버튼을 다시한번 눌러보면 

변수는 그대로 1이고 state인 counter 2는 값이 1이 되었다.

 

이건 무엇?..

 

counter가  1인 이유는 state가 변하면 리랜더링을 하기때문에 다시 컴포넌트를  그려주게 된다.

그래서 다시  counter을 0으로 초기화를 시킨다. state값은 초기화가 되지 않고

전에 값을 기억해서 변경을 시켜준다.

그렇기  때문에 변수는 초기화가 되어 계속 1이 되고 state값은  한박자 느리지만 계속 증가가 되는걸 확인할 수 있다.