[React] 리액트 상태 관리: 함수형 업데이트에 대한 정리

 

 

 

리액트에서 상태를 관리하기 위해 useState나 useReducer나 이것 저것 쓰는데..이때

어떻게 상태 업데이트 함수를 사용하냐에 따라 결과가 달라진다..

 

 

함수형 업데이트 기본문법

## 기본문법
setNumber((상태) => 상태 업데이트 로직);

## 샘플
setNumber((number) => number + 1);

 

 

함수형 업데이트란?

함수형 업데이트(Functional Update)는 React에서 상태를 업데이트하는 데 사용되는 패턴 중 하나입니다.

이 패턴을 사용하면 이전 상태에 의존하여 새로운 상태를 계산할 수 있습니다.

주로 useState 훅이나 클래스형 컴포넌트의 setState 메서드에서 사용됩니다.

 

 

함수형 업데이트를 사용하는 이유???

 

다들 알다시피, 리액트에서의 훅은 비동기적으로 동작한다.쉽게 말해서 아래와 같은 코드가 있다고 가정을 해보았을 때..

 

const [number, setNumber] = useState(0);

const changeNumber = () => {
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
};

 

위 코드에서 setNumber 함수를 통해 number의 값을 1씩 증가 시킨다. 하지만 비동기 처리를 하다보니number가 1 증가 했던 안했던, 다음 로직이 수행된다..

 

문제는 여기부터인데, 여기서의 number는 현재값을 가지고 있다는 것이다.. ( 여기서는 0 )그렇기 때문에 아무리 많이 setNumber를 하더라도 계속 '0 + 1'이라는 연산을 수행하게 된다.

 

말하자면 동기적으로 처리되고 있지 않다고도 할 수 있겠다..

 

이럴 때, 함수형 업데이트를 사용하면 동기적으로 처리하여 정상적으로 changeNumber라는 함수가 호출 될 때마다number가 4씩 증가하도록 할 수 있는데, 샘플코드는 아래와 같다..

 

const [number, setNumber] = useState(0);

const changeNumber = () => {
    setNumber((number) => number + 1);
    setNumber((number) => number + 1);
    setNumber((number) => number + 1);
    setNumber((number) => number + 1);
};

 

 

 

샘플코드

 

함수형 업데이트를 사용하지 않은 경우

import { useState, useCallback } from "react";

const App = () => {
  
  const [number, setNumber] = useState(0);

  const changeNumber = () => {
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
  };

  return (
    <>
      <div className="App">
        <h1>{number}</h1>
        <button onClick={changeNumber}>+</button>
      </div>
    </>
  );
};

export default App;

 

 

결과

0

 

함수형 업데이트를 사용한 경우

import { useState, useCallback } from "react";

const App = () => {
  const [number, setNumber] = useState(0);

  const changeNumber = () => {
    setNumber((number) => number + 1);
    setNumber((number) => number + 1);
    setNumber((number) => number + 1);
    setNumber((number) => number + 1);
  };

  return (
    <>
      <div className="App">
        <h1>{number}</h1>
        <button onClick={changeNumber}>+</button>
      </div>
    </>
  );
};

export default App;

 

 

결과

0

 

 

양쪽의 결과를 보면 함수형 업데이트를 사용한 경우에는 setNumber라는 상태업데이트 함수가 4번 호출되고,

값이 4씩 증가하는 게 보인다. 

 

하지만 함수형 업데이트를 사용하지 않은 경우에는 동일하게 setNumber를 4번 호출하지만 값은 1씩 증가한다..

 

이렇게 동기적으로 처리 할 필요가 있는 경우에는 함수형 업데이트로 처리하면 될 거 같다..