React Hooks(useState의 함수형 업데이트)

1. UseState

useState는 지난주에 지겹도록 사용한 바 있다.

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

복습차 한번 짚고 넘어가보자.

위 코드는 state라는 변수에 초기값으로 initialState가 들어있는 상태이다.

여기서 setState의 값을 전달받게 되면, state의 초기값은 사라지고

setState 값이 들어가게 된다. 

 

또한 state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줄 필요가 있다고도 

살펴봤다.

 

2.함수형 업데이트

setState를 사용하는 방식 중 함수형으로 값을 업데이트 하는 것을 뜻한다.

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

함수의 인자에서는 현재의 state를 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다.

 

예시)

// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것.
setState((currentNumber)=>{ return currentNumber + 1 });

 

3.두 방식의 차이

 

기존 방식)

// 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;

 

버튼을 누르면 값이 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;

버튼을 누르면 값이 3씩 증가한다.

 

일반 업데이트방식은 버튼을 클릭했을 때 첫째줄~셋째 줄이 각각 실행되는 것이 아니라,

일괄식으로 처리한다. 우리가 setNumber라는 명령을 세번 내리지만.

리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행시키는 것.

 

(추가적으로,+1을 하라는 명령 3개 대신 각각 +2 +4 +6을 명령하면

맨 마지막 줄에 있는 +6만 실행되는 것을 확인할 수 있다. )

 

반면, 함수형 업데이트방식은 3번을 동시에 명령을 내리면 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다.

0에 1을 더하고, 그다음 1에 1을 더하고 이런식으로 말이다.

 

( 마찬가지로 ,+1 3개 대신에 +2 +4 +6을 각각 명령하면 버튼을 클릭할 때 마다 12가 증가하는 것을

확인할 수 있다.)