setState할 때 […] 하는 이유

setState 역할

• setState()가 쓰일 때, 컴포넌트의 state 객체에 대한 업데이트를 실행
• state가 변경되면, 컴포넌트는 리 렌더링

state와 props의 차이점

• props와 state는 Javascript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다.
• props는 컴포넌트에 전달되며, state는 컴포넌트 안에서 관리되는 차이점이 있습니다.

---

언제 setState가 비동기로 작동할까?

import React, { useState } from "react";

function App() {
  const [state, setState] = useState(1);

  const onClick = () => {
    setState(state + 1);
    console.log(state);
  };

  return (
    <div className="App">
      <button onClick={onClick}>+1</button>
      <p>현재 값 {state}</p>
    </div>
  );
}

export default App;

• 현재 setState는 이벤트 핸들러 내에서 비동기적입니다.
• 위 코드는 state 값은 반영이 되지만, console에 찍힌 값은 이전 상태 값을 출력합니다 (console.log의 결괏값이 이전 상태를 나타냄).
• React가 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트하기 때문

연속적으로 setState 호출 시 야기되는 문제

import React, { useState } from "react";

function App() {
  const [state, setState] = useState(1);

  const onClick = () => {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
  };

  return (
    <div className="App">
      <button onClick={onClick}>+1</button>
      <p>현재 값 {state}</p>
    </div>
  );
}

export default App;

• 위 코드에서 내가 하고 싶은 결과는 버튼을 클릭할 때마다, 매번 +3 씩 출력되길 원합니다.
  • 하지만 오직 +1 씩만 증가해서 출력되는 걸 볼 수 있습니다.
• 그 이유는 React가 batch update를 하기 때문

⇒ setState()를 연속적으로 호출하면 Batch 처리