한 번 count

• 일반적인 방법

function App() {

  const [number, setNumber] = useState(0)
  return (
    <>
      <div>Number State : {number}</div>
      <button onClick={() => {
        setNumber(number + 1)
      }}>
        누르면 up
      </button>
    </>

  );
}

• 함수 업데이트 방법

function App() {

  const [number, setNumber] = useState(0)
  return (
    <>
      <div>Number State : {number}</div>
      <button onClick={() => {
        setNumber(currentNumber => currentNumber + 1)
      }}>
        누르면 up
      </button>
    </>

  );
}

결과는 같아 보인다.

---

세 번 count

• 일반적인 방법

function App() {

  const [number, setNumber] = useState(0)
  return (
    <>
      <div>Number State : {number}</div>
      <button onClick={() => {
        setNumber(number + 1)
        setNumber(number + 1)
        setNumber(number + 1)
      }}>
        누르면 up
      </button>
    </>

  );
}

버튼을 누르면 3씩 증가하는게 아니라 1만 증가한다.

• 함수형 업데이트방법

function App() {

  const [number, setNumber] = useState(0)
  return (
    <>
      <div>Number State : {number}</div>
      <button onClick={() => {
        setNumber(currentNumber => currentNumber + 1)
        setNumber(currentNumber => currentNumber + 1)
        setNumber(currentNumber => currentNumber + 1)
      }}>
        누르면 up
      </button>
    </>

  );
}

버튼을 한 번 눌러도 3이 증가한다.

---

---

왜?

일반적인 방법과 함수형 업데이트가 다른 이유

🐷

• 일반적인 방법

  • 배치 업데이트가 된다.
  • 한 번에 변경 된 내용들을 모아서 한번에 업데이트를 한다.
  • 똑같은게 있으면 한 개로 인식한다.
  
  

• 함수형 업데이트

  • 한 번에 변경 된 내용들을 모아서 순차적으로 업데이트를 한다.
  • setNumber((현재의 값) => (리턴할 값))
  • 현재의 값을 받아와 리턴을 하고 그 리턴한 값이 다음 함수의 현재의 값으로 들어가고 다시 리턴하고를 반복한다.

배치 업데이트를 하는 이유

🐷

• 랜더링이 잦다 -> 성능에 이슈가 있는 것
• 랜더링을 줄이기 위해 한번에 처리하는 것