useState 복습

 

const [state, setState] = useState(initialState);

• useState라는 함수가 배열을 반환하고, 이것을 구조분해문법으로 꺼내놓은 모습.
• state를 변수로, setState로 state를 수정할수 있음.
• state가 원시데이터타입이 아닌 객체 데이터타입일 시 불변성을 유지해주어야함.

 

기존에 우리는 setState를 사용해서 값을 변경했다.

setState(num +1)

하지만 이 안에 함수형으로 집어 넣을 수도 있다.

setState((currentNum)=> {return currentNum +1) };

 

 

뭐가다른데?

먼저 말하자면 일반업데이트방식은 batch로 처리되고, 함수형 업데이트 방식은 순차적으로 처리된다.

 

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

위 코드를 보고 버튼을 눌렀을 때 숫자가 3씩 증가한다고 생각할 수도 있다.

하지만 그렇지 않다. 일반 업데이트 방식은 버튼을 클릭했을 때 배칭(batching)되기 때문에,

setNumber 3번을 하나로 모아 최종적으로 한번 실행한다.

따라서 setNumber을 100번을쓰던 100000번을쓰던 결과적으로 1번만 실행된다.

 

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

이번엔 함수형 업데이트 방식이다. 함수형 업데이트 방식은 batch되지않고, 3번의 명령을 모아 순차적으로 각각 1번씩 실행시킨다. 따라서 3씩 증가하게된다.

 

정리

useState로 참조형데이터를 변경할 때는 불변성을 유지해야한다.

useState는 일반, 함수형 업데이트 방식 총 2가지가 있으며, 각각 다르게 동작한다.