useEffect는 비동기인가?

const Test = () => {
   const [count, setCount] = useState(1)
  useEffect(() => {
    setCount(count + 1);
    setCount((count) => count + 1)
    setCount(count + 1);
    setCount((count) => count + 1)
    setCount(count + 1);
    setCount((count) => count + 1)
  }, [])

  const [count1, setCount1] = useState(1);
  useEffect(()=>{
    setCount1(count1 + 1);
    setCount1(count1 + 1);
    setCount1(count1 + 1);
  },[])
  
  const [count2, setCount2] = useState(1);
  useEffect(()=>{
    setCount2(prev=> prev + 1);
    setCount2(prev=> prev + 1);
    setCount2(prev=> prev + 1);
  }, [])
  


  return (
    <div className='headerStyle'>
      count: {count}
      <br/>
      count1: {count1}
      <br/>
      count2: {count2}
    </div>
  )
 }

1. count: 3이 나오는 이유

• setCount(count + 1); count는 1을 참조한다
• setCount((count) => count + 1) prev는 2를 참조한다
  콜백함수는 이전 상태를 참조한다
  그러므로 count + 1의 값을 참조한다
• 위에 2줄이 계속 반복된다

2. count1: 2가 나오는 이유

• 리액트가 성능 향상을 위해 여러개의 state 업데이트(setState)를 하나의 리랜더링으로 묶는다(batch) => 변경사항 모아 한번의 일괄처리한다 => 마지막 명령만 수행
• useState는 비동기적으로 동작(한번에)

//count가 바라보고 있는 값 => 1
setCount( 1 + 1 )
setCount ( 1 + 1 )
setCount ( 1 + 1 )

3. count2: 4가 나오는 이유

• setCount ((prev) => prev + 1 ) 동기적으로 처리하는 방법이다
• 함수적 갱신은 현재 값을 증가시킨다.

setCount( 1 => 1 + 1 )
setCount( 2 => 2 + 1 )
setCount( 3 => 3 + 1 )

---

정리

• useState는 비동기로 동작함
• 브라우저의 이벤트가 끝날 때 한번에 렌더링을 하기 때문에 setCount(count+1)을 여러개 하여도 렌더링이 한번만 일으킨다
• 콜백함수(updater함수)를 이용하면 순서대로 처리가 된다
• useState의 비동기로 인하여 웹 페이지 불필요한 렌더링 횟수를 줄여 성능 향상에 도움을 준다

---

출처 : https://www.philly.im/blog/things-to-know-about-use-state
https://velog.io/@alstnsrl98/useState%EB%8A%94-%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%8F%99%EA%B8%B0%EC%A0%81-%EC%B2%98%EB%A6%AC
https://taenami.tistory.com/49