React 일괄 상태 업데이트: 성능 최적화된 상태 변경

빠르게 변화하는 현대 웹 개발 세계에서는 매끄럽고 반응이 빠른 사용자 경험을 제공하는 것이 가장 중요합니다. React 개발자에게 있어 상태를 효율적으로 관리하는 것은 이 목표를 달성하기 위한 초석입니다. React가 성능을 최적화하기 위해 사용하는 가장 강력하면서도 때로는 오해받는 메커니즘 중 하나가 바로 상태 배치(state batching)입니다. React가 여러 상태 업데이트를 함께 그룹화하는 방법을 이해하면 애플리케이션의 성능을 크게 향상시켜 더 부드러운 UI와 전반적으로 더 나은 사용자 경험을 제공할 수 있습니다.

React의 상태 배치란 무엇인가?

핵심적으로, 상태 배치는 동일한 이벤트 핸들러나 비동기 작업 내에서 발생하는 여러 상태 업데이트를 단일 리렌더링으로 그룹화하는 React의 전략입니다. 각 개별 상태 변경에 대해 컴포넌트를 리렌더링하는 대신, React는 이러한 변경 사항들을 모아서 한 번에 모두 적용합니다. 이는 불필요한 리렌더링 횟수를 크게 줄여주며, 이는 종종 애플리케이션 성능의 병목 현상이 되곤 합니다.

클릭했을 때 두 개의 개별 상태를 업데이트하는 버튼이 있는 시나리오를 생각해 보세요. 배치가 없다면 React는 일반적으로 첫 번째 상태 업데이트 후 한 번, 두 번째 상태 업데이트 후 또 한 번, 총 두 번의 개별 리렌더링을 트리거합니다. 배치를 사용하면 React는 가깝게 발생하는 이러한 업데이트들을 지능적으로 감지하고 단일 리렌더링 주기로 통합합니다. 이는 컴포넌트의 생명주기 메서드(또는 함수형 컴포넌트의 동등한 기능)가 더 적게 호출되고 UI가 더 효율적으로 업데이트된다는 것을 의미합니다.

배치가 성능에 중요한 이유는 무엇인가?

리렌더링은 React가 상태나 props의 변경 사항을 반영하여 UI를 업데이트하는 주요 메커니즘입니다. 필수적이지만, 과도하거나 불필요한 리렌더링은 다음과 같은 문제를 야기할 수 있습니다:

• CPU 사용량 증가: 각 리렌더링은 React가 이전 가상 DOM과 현재 가상 DOM을 비교하여 실제 DOM에서 무엇을 업데이트해야 할지 결정하는 조정(reconciliation) 과정을 포함합니다. 리렌더링이 많을수록 더 많은 계산이 필요합니다.
• 느린 UI 업데이트: 브라우저가 컴포넌트를 자주 리렌더링하느라 바쁠 때, 사용자 상호 작용, 애니메이션 및 기타 중요한 작업을 처리할 시간이 줄어들어 인터페이스가 느리거나 반응이 없는 것처럼 보일 수 있습니다.
• 메모리 소비 증가: 각 리렌더링 주기는 새로운 객체와 데이터 구조를 생성할 수 있으며, 시간이 지남에 따라 메모리 사용량이 증가할 수 있습니다.

상태 업데이트를 배치함으로써 React는 이러한 비용이 많이 드는 리렌더링 작업의 수를 효과적으로 최소화하여, 특히 상태 변경이 잦은 복잡한 애플리케이션에서 더 성능이 좋고 유연한 애플리케이션을 만들 수 있습니다.

React가 상태 배치를 처리하는 방법 (자동 배치)

역사적으로 React의 자동 상태 배치는 주로 합성 이벤트 핸들러에 국한되었습니다. 즉, 클릭이나 키보드 이벤트와 같은 네이티브 브라우저 이벤트 내에서 상태를 업데이트하면 React가 해당 업데이트를 배치했습니다. 그러나 프로미스(promise), `setTimeout` 또는 네이티브 이벤트 리스너에서 발생하는 업데이트는 자동으로 배치되지 않아 여러 번의 리렌더링이 발생했습니다.

이러한 동작은 React 18에서 동시성 모드(Concurrent Mode)(현재는 동시성 기능으로 불림)가 도입되면서 크게 변경되었습니다. React 18 이상에서는 프로미스, `setTimeout`, 네이티브 이벤트 리스너를 포함한 모든 비동기 작업에서 트리거된 상태 업데이트를 기본적으로 자동으로 배치합니다.

React 17 및 이전 버전: 자동 배치의 미묘한 차이

이전 버전의 React에서는 자동 배치가 더 제한적이었습니다. 일반적으로 다음과 같이 작동했습니다:

• 합성 이벤트 핸들러: 이 안에서의 업데이트는 배치되었습니다. 예:

            import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(c => c + 1);
    setValue(v => v + 1);
  };

  return (
    

      
Count: {count}
      
Value: {value}
      Increment Both
    
  );
}

export default Counter;
            

              
                Copy
              
            
          

이 예제에서 버튼을 클릭하면 onClick이 합성 이벤트 핸들러이기 때문에 단일 리렌더링만 트리거됩니다.

• 비동기 작업 (프로미스, setTimeout): 이 안에서의 업데이트는 자동으로 배치되지 않았습니다. 이로 인해 개발자들은 종종 라이브러리나 특정 React 패턴을 사용하여 수동으로 업데이트를 배치해야 했습니다.

            import React, { useState } from 'react';

function AsyncCounter() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(0);

  const handleAsyncClick = () => {
    // This will cause two re-renders in React < 18
    setTimeout(() => {
      setCount(c => c + 1);
      setValue(v => v + 1);
    }, 1000);
  };

  return (
    

      
Count: {count}
      
Value: {value}
      Increment After Delay
    
  );
}

export default AsyncCounter;
            

              
                Copy
              
            
          

React 18 이전 버전에서는 setTimeout 콜백이 자동으로 배치되지 않았기 때문에 두 번의 개별 리렌더링을 트리거했습니다. 이것이 성능 문제의 일반적인 원인이었습니다.

React 18 이상: 보편적인 자동 배치

React 18은 트리거에 관계없이 모든 업데이트에 대해 자동 배치를 활성화하여 상태 배치를 혁신했습니다.

React 18의 핵심 이점:

• 일관성: 상태 업데이트가 이벤트 핸들러, 프로미스, `setTimeout` 또는 다른 비동기 작업 등 어디에서 시작되든 상관없이 React 18은 자동으로 이를 단일 리렌더링으로 배치합니다.

React 18에서의 AsyncCounter 예제를 다시 살펴보겠습니다:

            import React, { useState } from 'react';

function AsyncCounterReact18() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(0);

  const handleAsyncClick = () => {
    // In React 18+, this will cause only ONE re-render.
    setTimeout(() => {
      setCount(c => c + 1);
      setValue(v => v + 1);
    }, 1000);
  };

  return (
    

      
Count: {count}
      
Value: {value}
      Increment After Delay (React 18+)
    
  );
}

export default AsyncCounterReact18;
            

              
                Copy
              
            
          

React 18에서는 이제 setTimeout 콜백이 단 한 번의 리렌더링만 트리거합니다. 이는 개발자에게 큰 개선이며, 코드를 단순화하고 자동으로 성능을 향상시킵니다.

수동으로 업데이트 배치하기 (필요한 경우)

React 18의 자동 배치가 게임 체인저이긴 하지만, 배치를 명시적으로 제어해야 하거나 이전 React 버전으로 작업하는 드문 시나리오가 있을 수 있습니다. 이러한 경우를 위해 React는 unstable_batchedUpdates 함수를 제공합니다 (하지만 불안정하다는 이름은 가능할 때 자동 배치를 선호하라는 것을 상기시켜 줍니다).

중요 참고: unstable_batchedUpdates API는 불안정한 것으로 간주되며 향후 React 버전에서 제거되거나 변경될 수 있습니다. 주로 자동 배치에 의존할 수 없거나 레거시 코드로 작업하는 상황을 위한 것입니다. 항상 React 18 이상의 자동 배치를 활용하는 것을 목표로 하세요.

이를 사용하려면 일반적으로 react-dom(DOM 관련 애플리케이션의 경우)에서 가져와 상태 업데이트를 그 안에 래핑합니다:

            import React, { useState } from 'react';
import ReactDOM from 'react-dom'; // Or 'react-dom/client' in React 18+

// If using React 18+ with createRoot, unstable_batchedUpdates is still available but less critical.
// For older React versions, you'd import from 'react-dom'.

function ManualBatchingExample() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(0);

  const handleManualBatchClick = () => {
    // In older React versions, or if auto-batching fails for some reason,
    // you might wrap updates here.
    ReactDOM.unstable_batchedUpdates(() => {
      setCount(c => c + 1);
      setValue(v => v + 1);
    });
  };

  return (
    

      
Count: {count}
      
Value: {value}
      Manual Batch Increment
    
  );
}

export default ManualBatchingExample;
            

              
                Copy
              
            
          

어떤 경우에 `unstable_batchedUpdates`를 여전히 고려할 수 있을까요 (주의해서)?

• 비-React 코드와의 통합: React의 합성 이벤트 시스템을 우회하는 비-React 라이브러리나 커스텀 이벤트 시스템에 의해 상태 업데이트가 트리거되는 대규모 애플리케이션에 React 컴포넌트를 통합하고 있고, React 18 이전 버전을 사용 중이라면 이것이 필요할 수 있습니다.
• 특정 서드파티 라이브러리: 때때로 서드파티 라이브러리가 자동 배치를 우회하는 방식으로 React 상태와 상호 작용할 수 있습니다.

그러나 React 18의 보편적인 자동 배치가 도입되면서 unstable_batchedUpdates의 필요성은 급격히 줄어들었습니다. 현대적인 접근 방식은 React의 내장 최적화에 의존하는 것입니다.

리렌더링과 배치 이해하기

배치를 진정으로 이해하려면 React에서 무엇이 리렌더링을 트리거하고 배치가 어떻게 개입하는지 이해하는 것이 중요합니다.

무엇이 리렌더링을 유발하는가?

• 상태 변경: 상태 설정 함수(예: setCount(5))를 호출하는 것이 가장 일반적인 트리거입니다.
• Prop 변경: 부모 컴포넌트가 리렌더링되고 자식 컴포넌트에 새로운 props를 전달하면 자식 컴포넌트가 리렌더링될 수 있습니다.
• 컨텍스트 변경: 컴포넌트가 컨텍스트를 사용하고 컨텍스트 값이 변경되면 리렌더링됩니다.
• 강제 업데이트: 일반적으로 권장되지 않지만, forceUpdate()는 명시적으로 리렌더링을 트리거합니다.

배치가 리렌더링에 미치는 영향:

count와 value에 의존하는 컴포넌트가 있다고 상상해 보세요. 배치가 없다면, setCount가 호출된 직후 setValue가 호출되면(예: 별도의 마이크로태스크나 타임아웃에서), React는 다음과 같이 작동할 수 있습니다:

1. setCount를 처리하고 리렌더링을 스케줄합니다.
2. setValue를 처리하고 또 다른 리렌더링을 스케줄합니다.
3. 첫 번째 리렌더링을 수행합니다.
4. 두 번째 리렌더링을 수행합니다.

배치를 사용하면 React는 효과적으로 다음과 같이 작동합니다:

1. setCount를 처리하고 보류 중인 업데이트 큐에 추가합니다.
2. setValue를 처리하고 큐에 추가합니다.
3. 현재 이벤트 루프나 마이크로태스크 큐가 비워지면(또는 React가 커밋하기로 결정하면), React는 해당 컴포넌트(또는 그 조상)에 대한 모든 보류 중인 업데이트를 그룹화하고 단일 리렌더링을 스케줄합니다.

동시성 기능의 역할

React 18의 동시성 기능은 보편적인 자동 배치의 원동력입니다. 동시성 렌더링을 통해 React는 렌더링 작업을 중단, 일시 중지 및 재개할 수 있습니다. 이 기능은 React가 DOM에 업데이트를 커밋하는 방법과 시점에 대해 더 지능적으로 대처할 수 있게 해줍니다. 렌더링이 단일의 블로킹 프로세스가 아니라 더 세분화되고 중단 가능하게 되어, React가 UI에 커밋하기 전에 여러 업데이트를 통합하기가 더 쉬워집니다.

React가 렌더링을 수행하기로 결정하면, 마지막 커밋 이후 발생한 모든 보류 중인 상태 업데이트를 살펴봅니다. 동시성 기능을 사용하면 메인 스레드를 장시간 차단하지 않고 이러한 업데이트를 더 효과적으로 그룹화할 수 있습니다. 이것이 비동기 업데이트의 자동 배치를 뒷받침하는 근본적인 변화입니다.

실용적인 예제 및 사용 사례

상태 배치를 이해하고 활용하는 것이 유익한 몇 가지 일반적인 시나리오를 살펴보겠습니다:

1. 여러 입력 필드가 있는 폼

사용자가 폼을 작성할 때, 각 키 입력은 해당 입력 필드에 대한 상태 변수를 업데이트하는 경우가 많습니다. 복잡한 폼에서는 이로 인해 많은 개별 상태 업데이트와 잠재적인 리렌더링이 발생할 수 있습니다. 개별 입력 업데이트는 React의 차이 비교 알고리즘(diffing algorithm)에 의해 최적화될 수 있지만, 배치는 전반적인 변동을 줄이는 데 도움이 됩니다.

            import React, { useState } from 'react';

function UserProfileForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);

  // In React 18+, all these setState calls within a single event handler
  // will be batched into one re-render.
  const handleNameChange = (e) => setName(e.target.value);
  const handleEmailChange = (e) => setEmail(e.target.value);
  const handleAgeChange = (e) => setAge(parseInt(e.target.value, 10) || 0);

  // A single function to update multiple fields based on event target
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    if (name === 'name') setName(value);
    else if (name === 'email') setEmail(value);
    else if (name === 'age') setAge(parseInt(value, 10) || 0);
  };

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Age:
        
      
      {/* Displaying current state for demonstration */}
      
Current Name: {name}
      
Current Email: {email}
      
Current Age: {age}
    
  );
}

export default UserProfileForm;
            

              
                Copy
              
            
          

React 18 이상에서는 이러한 필드 중 하나에 대한 각 키 입력이 상태 업데이트를 트리거합니다. 그러나 이들은 모두 동일한 합성 이벤트 핸들러 체인 내에 있기 때문에 React가 이를 배치합니다. 별도의 핸들러가 있더라도 동일한 이벤트 루프의 턴 내에서 발생하면 React 18은 여전히 이를 배치합니다.

2. 데이터 가져오기 및 업데이트

데이터를 가져온 후 응답에 따라 여러 상태 변수를 업데이트하는 경우가 많습니다. 배치는 이러한 순차적 업데이트가 리렌더링의 폭발을 일으키지 않도록 보장합니다.

            import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1500));
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // In React 18+, these updates are batched into a single re-render.
        setUser(data);
        setIsLoading(false);
        setError(null);
      } catch (err) {
        setError(err.message);
        setIsLoading(false);
        setUser(null);
      }
    };

    fetchUserData();
  }, [userId]);

  if (isLoading) {
    return 
Loading user data...
;
  }

  if (error) {
    return 
Error: {error}
;
  }

  if (!user) {
    return 
No user data available.
;
  }

  return (
    

      
{user.name}
      
Email: {user.email}
      {/* Other user details */}
    
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

이 `useEffect` 훅에서 비동기 데이터 가져오기 및 처리 후 `setUser`, `setIsLoading`, `setError`라는 세 가지 상태 업데이트가 발생합니다. React 18의 자동 배치 덕분에 이 세 가지 업데이트는 데이터가 성공적으로 가져오거나 오류가 발생한 후 단 한 번의 UI 리렌더링만 트리거합니다.

3. 애니메이션 및 전환

시간에 따라 여러 상태 변경을 포함하는 애니메이션(예: 요소의 위치, 불투명도, 크기 애니메이션)을 구현할 때, 배치는 부드러운 시각적 전환을 보장하는 데 중요합니다. 각 작은 애니메이션 단계가 리렌더링을 유발한다면 애니메이션이 뚝뚝 끊기는 것처럼 보일 것입니다.

전용 애니메이션 라이브러리는 종종 자체 렌더링 최적화를 처리하지만, React의 배치를 이해하면 사용자 지정 애니메이션을 만들거나 통합할 때 도움이 됩니다.

            import React, { useState, useEffect, useRef } from 'react';

function AnimatedBox() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(1);
  const animationFrameId = useRef(null);

  const animate = () => {
    setPosition(currentPos => {
      const newX = currentPos.x + 5;
      const newY = currentPos.y + 5;
      // If we reach the end, stop the animation
      if (newX > 200) {
        // Cancel the next frame request
        if (animationFrameId.current) {
          cancelAnimationFrame(animationFrameId.current);
        }
        // Optionally fade out
        setOpacity(0);
        return currentPos;
      }
      // In React 18+, setting position and opacity here
      // within the same animation frame processing turn
      // will be batched.
      // Note: For very rapid, sequential updates within the *same* animation frame,
      // direct manipulation or ref updates might be considered, but for typical
      // 'animate in steps' scenarios, batching is powerful.
      return { x: newX, y: newY };
    });
  };

  useEffect(() => {
    // Start animation on mount
    animationFrameId.current = requestAnimationFrame(animate);
    return () => {
      // Cleanup: cancel animation frame if component unmounts
      if (animationFrameId.current) {
        cancelAnimationFrame(animationFrameId.current);
      }
    };
  }, []); // Empty dependency array means this runs once on mount

  return (
    

  );
}

export default AnimatedBox;
            

              
                Copy
              
            
          

이 단순화된 애니메이션 예제에서는 `requestAnimationFrame`이 사용됩니다. React 18은 `animate` 함수 내에서 발생하는 상태 업데이트를 자동으로 배치하여, 박스가 더 적은 리렌더링으로 움직이고 잠재적으로 사라지게 함으로써 더 부드러운 애니메이션에 기여합니다.

상태 관리 및 배치를 위한 모범 사례

• React 18+ 사용하기: 새 프로젝트를 시작하거나 업그레이드할 수 있다면 React 18로 이전하여 보편적인 자동 배치의 이점을 누리세요. 이것이 상태 업데이트와 관련된 성능 최적화를 위해 취할 수 있는 가장 중요한 단계입니다.
• 트리거 이해하기: 상태 업데이트가 어디에서 오는지 파악하세요. 합성 이벤트 핸들러 내에 있다면 이미 배치될 가능성이 높습니다. 이전 비동기 컨텍스트에 있다면 이제 React 18이 처리할 것입니다.
• 함수형 업데이트 선호하기: 새로운 상태가 이전 상태에 의존할 때 함수형 업데이트 형식(예: setCount(prevCount => prevCount + 1))을 사용하세요. 이는 특히 비동기 작업 및 배치와 관련하여 최신 상태 값으로 작업하는 것을 보장하므로 일반적으로 더 안전합니다.
• 필요하지 않은 한 수동 배치 피하기: unstable_batchedUpdates는 예외적인 경우와 레거시 코드를 위해 남겨두세요. 자동 배치에 의존하면 더 유지보수하기 쉽고 미래에도 사용 가능한 코드가 됩니다.
• 애플리케이션 프로파일링하기: React 개발자 도구 프로파일러를 사용하여 과도하게 리렌더링되는 컴포넌트를 식별하세요. 배치가 많은 시나리오를 최적화하지만, 부적절한 메모이제이션이나 prop 드릴링과 같은 다른 요인들도 여전히 성능 문제를 일으킬 수 있습니다. 프로파일링은 정확한 병목 지점을 찾는 데 도움이 됩니다.
• 관련 상태 그룹화하기: 관련 상태를 단일 객체로 그룹화하거나 복잡한 상태 계층 구조를 위해 컨텍스트/상태 관리 라이브러리를 사용하는 것을 고려하세요. 개별 상태 설정자 배치와 직접적인 관련은 없지만, 상태 업데이트를 단순화하고 필요한 개별 `setState` 호출 수를 줄일 수 있습니다.

일반적인 함정과 이를 피하는 방법

• React 버전 무시하기: 모든 React 버전에서 배치가 동일하게 작동한다고 가정하면 오래된 코드베이스에서 예기치 않은 다중 리렌더링이 발생할 수 있습니다. 항상 사용 중인 React 버전을 염두에 두세요.
• 동기식과 유사한 업데이트에 `useEffect` 과도하게 의존하기: `useEffect`는 부수 효과를 위한 것이지만, `useEffect` 내에서 동기식처럼 느껴지는 빠르고 밀접하게 관련된 상태 업데이트를 트리거하는 경우, 더 잘 배치될 수 있는지 고려해 보세요. React 18이 여기서 도움이 되지만, 상태 업데이트의 논리적 그룹화는 여전히 중요합니다.
• 프로파일러 데이터 오해하기: 프로파일러에서 여러 상태 업데이트가 보이는 것이 단일 커밋으로 올바르게 배치되었다면 항상 비효율적인 렌더링을 의미하는 것은 아닙니다. 단순히 상태 업데이트 수보다는 커밋(리렌더링) 수에 집중하세요.
• `componentDidUpdate` 또는 `useEffect` 내에서 확인 없이 `setState` 사용하기: 클래스 컴포넌트에서 적절한 조건 확인 없이 `componentDidUpdate`나 `useEffect` 내에서 `setState`를 호출하면 배치 기능이 있더라도 무한 리렌더링 루프에 빠질 수 있습니다. 이를 방지하기 위해 항상 조건을 포함하세요.

결론

상태 배치는 React의 강력한 내부 최적화 기능으로, 애플리케이션 성능을 유지하는 데 중요한 역할을 합니다. React 18에서 보편적인 자동 배치가 도입됨에 따라, 개발자들은 이제 다양한 비동기 소스에서 발생하는 여러 상태 업데이트가 지능적으로 단일 리렌더링으로 그룹화되므로 훨씬 더 부드럽고 예측 가능한 경험을 누릴 수 있습니다.

배치가 작동하는 방식을 이해하고 함수형 업데이트 사용 및 React 18의 기능 활용과 같은 모범 사례를 채택함으로써, 더 반응이 빠르고 효율적이며 성능이 뛰어난 React 애플리케이션을 구축할 수 있습니다. 항상 애플리케이션을 프로파일링하여 최적화를 위한 특정 영역을 식별하되, React의 내장 배치 메커니즘이 완벽한 사용자 경험을 추구하는 데 있어 중요한 동맹임을 확신하세요.

React 개발 여정을 계속하면서 이러한 성능의 미묘한 차이에 주의를 기울이는 것은 의심할 여지없이 사용자가 세계 어디에 있든 애플리케이션의 품질과 사용자 만족도를 높여줄 것입니다.