React setState() 사용 시 알아둘 것

setState()

setState()는 리액트의 함수형 컴포넌트에서 상태를 변경하기 위해 사용되는 hook

useState()를 통해 반환되는 함수라고 할 수 있다.

 

setState()의 특징

1. 비동기 동작이다.

2.연속적으로 호출 setState() 호출 시  BATCH(일괄) 처리가 된다.

3.단순히 state 객체를 넘겨줄 수도 있지만 함수형으로 새로운 state를 인자로 넘겨 줄 수 있다.

 

setState()의 연속사용?

리액트에서 state가 변경되면

변경되기 이전의 state로 구성된 element tree와 변경 이후의 state로 구성된 element tree를 비교하여 

변경된 부분을 감지하여 DOM에 적용하게된다.

 

그런데 리액트 내부적으로 이 과정에서 setState() 가 연속적으로 호출되면 각 함수 호출시의 state 값을 merging하게 된다.

또한 setState는 한번 만 호출하게 된다.

 

예시코드

import React, { useState } from 'react';

function App() {
  const [current, setCurrent] = useState(0);

  const onPlus1 = () => {
    setCurrent(current + 1)
    setCurrent(current + 1)
  }
  const onPlus2 = () => {
    setCurrent(current + 2)
  }

  return (
    <div className="App">
      <h1>
        This is current: {current}
      </h1>
      <div className="btn-group">
        <button onClick={onPlus1}>plus 1</button>
        <button onClick={onPlus2}>plus 2</button>
      </div>
    </div>
  );
}

export default App;

 

plus 1 버튼 클릭 시 setCurrent는 한번 만 호출된다.

 

아래와 같이 변경 후 plus  multiple 클릭 시 setCurrent가 모두 실행되며 current 값도 우리가 원하는 대로 최신의 값을 업데이트 할 수 있다. (이는 setState()가 내부적으로 함수를 인자로 넘겨받으면 큐 구조를 가지고 있는 저장공간에 이를 넣고 실행하고 그 다음 함수로 인자를 넘겨주는 방식으로 최신의 값을 업데이트 할 수 있게 해준다.)

import React, { useState } from 'react';
import './App.css'

function App() {
  const [current, setCurrent] = useState(0);

  const onPlus1 = () => {
    setCurrent(prev => prev + 1)
    setCurrent(prev => prev + 1)
  }
  const onPlus2 = () => {
    setCurrent(prev => prev + 2)
  }
  const onPlusMultiple = () => {
    onPlus1();
    onPlus2();
  }

  return (
    <div className="App">
      <h1>
        This is current: {current}
      </h1>
      <div className="btn-group">
        <button onClick={onPlus1}>plus 1</button>
        <button onClick={onPlus2}>plus 2</button>
        <button onClick={onPlusMultiple}>plus multiple</button>
      </div>
    </div>
  );
}

export default App;