useState로 상태 안전하게 다루기: 함수형 업데이트 가이드

React에서 useState를 더 안전하고 효율적으로 사용하는 방법을 알아보자. 특히 함수형 업데이트라는 기법을 통해 상태 관리를 더 똑똑하게 할 수 있다.

---

왜 함수형 업데이트가 필요할까?

 

React로 개발하다 보면 이런 경험이 있을 것이다:

- 상태 업데이트가 예상대로 동작하지 않는다

- 여러 번 상태를 변경했는데 한 번만 반영된다

- 이전 상태값이 제대로 반영되지 않는다

 

이러한 문제들은 대부분 React의 상태 업데이트가 비동기적으로 동작하기 때문에 발생한다. 하지만 함수형 업데이트를 사용하면 이런 문제들을 깔끔하게 해결할 수 있다.

---

함수형 업데이트란?

 

함수형 업데이트는 말 그대로 함수를 사용해서 상태를 업데이트하는 방식이다. 

기존 상태를 기반으로 새로운 상태를 만들어내는 함수를 전달하는 것이다.

---

일반적인 방식 vs 함수형 업데이트

// 일반적인 방식 (❌ 권장하지 않음)
setCount(count + 1);

// 함수형 업데이트 (✅ 권장)
setCount(prevCount => prevCount + 1);

 

함수형 업데이트를 사용하면 항상 최신 상태값을 기준으로 업데이트가 이루어져서 훨씬 안전하다.

---

실제 사용 예시

 

1. 간단한 카운터

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

  return (
    <div>
      <p>👉 현재 숫자: {count}</p>
      <button 
        onClick={() => setCount(prev => prev + 1)}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        숫자 올리기
      </button>
    </div>
  );
}

 

---

2. 여러 번 상태 업데이트하기

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

  const increaseThreeTimes = () => {
    // ✅ 이렇게 하면 정확히 3씩 증가한다
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };

  return (
    <button onClick={increaseThreeTimes}>
      3번 올리기
    </button>
  );
}

 

---

3. 조건부 상태 업데이트

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

  const incrementWithLimit = () => {
    setCount(prev => {
      // 10 이상이면 더 이상 증가하지 않는다
      if (prev >= 10) {
        alert('최대 10까지만 가능하다!');
        return prev;
      }
      return prev + 1;
    });
  };

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={incrementWithLimit}>올리기</button>
    </div>
  );
}

 

---

함수형 업데이트의 장점 정리

 

1. 안전한 상태 업데이트

- 항상 최신 상태를 기준으로 업데이트된다

- 비동기 작업에서도 안전하다

 

2. 코드 가독성 향상

- 상태 변경 로직이 더 명확해진다

- 디버깅이 쉬워진다

 

3. 성능 최적화

- React의 배치 업데이트와 잘 어울린다

- 불필요한 렌더링을 줄여준다

---

 

함수형 업데이트는 React에서 상태를 다룰 때 꼭 알아야 할 중요한 개념이다. 

특히 복잡한 상태 관리가 필요한 경우에 더욱 유용하다. 

이 방식을 활용하면 더 안정적이고 예측 가능한 앱을 만들 수 있다.

 

실제 프로젝트에서 상태 업데이트가 예상대로 동작하지 않는다면, 함수형 업데이트를 적용해보자.