리액트 상태 업데이트 함수 양식

리액트에서 상태를 업데이트할 때, 기존 상태에 의존하는 값으로 업데이트를 수행해야 할 때가 있다. 이때 "함수 양식"을 사용하여 상태를 업데이트할 수 있다.

함수 양식은 이전 상태를 매개변수로 받고, 새로운 상태를 반환하는 함수다.
이전 상태를 받아 새로운 상태를 계산하고 반환함으로써 상태를 업데이트할 수 있다.
이는 함수형 업데이트라고도 알려져 있다.

상태가 숫자를 포함하는 객체일 경우 이전 상태를 기반으로 숫자를 증가시키는 예시

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    // 상태 업데이트의 '함수 양식'을 사용해야 한다.
    setCount(prevCount => prevCount + 1);
    
    // 상태를 직접 사용하는 것이 아니다.
    // setCount(count + 1)
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

위 예시에서 setCount 함수는 함수 양식으로 사용되었다.
setCount 함수에 이전 상태를 나타내는 prevCount 매개변수가 전달되고, 이전 상태에 1을 더한 값을 반환하여 상태를 업데이트한다.
이전 상태를 직접 참조하고 수정하는 대신 함수형 업데이트를 사용함으로써, 리액트는 상태 변경의 충돌을 방지하고 최신 값을 보장할 수 있게 된다.

함수 양식을 사용하면 상태 업데이트가 비동기적으로 이루어질 수도 있다. 따라서 이전 상태를 의존하는 연산을 수행하거나, 상태가 최신인지 여부에 관계없이 상태를 업데이트할 수 있게 된다.

상태 업데이트의 정확성과 성능을 개선 가능.