React - useState Update

 

useState 사용 시 주의할 점

App.js

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}

 

위의 "+3" 버튼을 클릭하면 호출 횟수에 관계없이 이벤트 핸들러 내부 number 값은 항상 0 

setNumber(1)이 계속 호출이 되는것이다. 

 

=> 리액트는 이벤트를 일괄 처리하지 않으며 별도로 처리된다. 

       "+3"버튼을 클릭할 때마다 number 값은 1,2,3... 이렇게 1씩 숫자가 카운트 될것이다. 

 

 

 

 

동일한 상태를 여러번 업데이트 해야하는 경우

App.js

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>
    </>
  )
}

 

위의 "+3" 버튼을 클릭하면 다음 상태 값을 전달하는 대신 이전 상태를 기반으로 다음 상태를 계산한다. 

단순히 상태 값을 바꾸는 대신 리액트에게 상태 값으로 무언가를 하라고 지시하는 방법인다. 

 

이벤트 핸들러를 실행하는 동안 리액트의 코드 작동 방법은 아래와 같다.

queued update	n	returns
n => n + 1	0	0 + 1 = 1
n => n + 1	1	1 + 1 = 2
n => n + 1	2	2 + 1 = 3

 

=> 리액트는 최종 결과 3을 저장한다. "+3"을 한번 클릭할 때마다 3씩 증가한다.