state 변경 함수는 비동기처리

1. 리액트에서 비동기 처리

react에서 state를 변경하는 함수는 비동기로 처리된다.
오래 걸리기 때문에 빨리 수행할 수 있는 것부터 먼저 처리하고
state변경함수를 처리한다.

      <input
        type="text"
        onChange={(e) => {
          setValue(e.target.value); // 비동기처리
          console.log(value); // 먼저 실행
        }}
      />

setValue 함수가 먼저지만 console.log()가 먼저 수행되기 때문에
첫 글자를 입력해도 value가 아직 변경되기도 전에 콘솔이 수행되어 콘솔창에는 아무것도 없는 빈 문자를 찍는다.
그 다음 글자부터 이전 상태를 콘솔에 찍는다.

이 현상을 해결하기 위해 useEffect hook을 사용한다.

 useEffect(() => {
    // state가 변경될 때 마다 실행할 함수
  }, []); // dependency array에 state 값을 입력 여러개 가능