Concurrent Mode를 이용한 자바스크립트 애니메이션 개발

09 Nov 2023

reactjs

React의 Concurrent Mode는 사용자 경험이 매끄럽고 응답성이 뛰어나도록 애플리케이션을 개발할 수 있는 기능입니다. Concurrent Mode를 활용하면 리액트 앱은 사용자가 다른 작업을 수행하면서도 빠른 업데이트를 제공할 수 있습니다. 애니메이션은 Concurrent Mode를 활용한 고성능 리액트 앱을 개발할 때 매우 중요한 부분입니다. 이번 블로그에서는 Concurrent Mode를 이용하여 자바스크립트 애니메이션 개발을 다루어 보겠습니다.

Concurrent Animation 개발 패턴

Concurrent Mode에서 애니메이션 개발을 위해 알아야 할 첫 번째 개념은 requestAnimationFrame입니다. requestAnimationFrame은 브라우저에게 애니메이션 프레임의 시작을 알리는 함수입니다. 이 함수를 사용하면 애니메이션을 정확한 속도로 표시할 수 있습니다.

애니메이션을 만들기 위해 다음과 같은 단계를 따를 수 있습니다:

애니메이션 상태를 관리할 상태 변수를 생성합니다.
useEffect 훅과 requestAnimationFrame을 사용하여 애니메이션 프레임을 업데이트합니다.
상태 변수를 기반으로 애니메이션을 그리는 UI를 만듭니다.

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

function AnimationComponent() {
  const [position, setPosition] = useState(0);

  useEffect(() => {
    let start;

    function step(timestamp) {
      if (start === undefined) {
        start = timestamp;
      }
      const elapsed = timestamp - start;
      setPosition(Math.min(0.1 * elapsed, 200));

      if (elapsed < 2000) {
        requestAnimationFrame(step);
      }
    }

    requestAnimationFrame(step);
  }, []);

  return (
    <div style={{ position: 'relative', top: position }}>
      This element will animate
    </div>
  );
}

이 코드에서는 position이라는 상태 변수를 사용하여 요소의 위치를 표현합니다. useEffect 훅을 사용하여 requestAnimationFrame을 호출하고 애니메이션 프레임을 업데이트합니다. useState 훅을 사용하여 position을 업데이트하는 동안 애니메이션이 발생합니다. 이 컴포넌트를 마운트할 때 한번 실행되는 useEffect의 두 번째 인자로 빈 배열을 전달하여 처음에만 애니메이션을 시작합니다.

Concurrent Mode와 애니메이션의 성능 개선

리액트의 Concurrent Mode를 사용하면 애니메이션과 같은 성능에 민감한 작업을 더욱 개선할 수 있습니다. Concurrent Mode는 리액트가 우선 순위를 가지고 프로세스를 처리하고 작업을 분할하는 기능을 제공합니다. 이렇게 함으로써, 애니메이션과 같은 작업은 CPU와 GPU의 자원을 더욱 효율적으로 사용할 수 있으며, 응답성과 성능을 향상시킬 수 있습니다.

애니메이션 개발 시 Concurrent Mode를 고려해야하는 몇 가지 사항이 있습니다:

불필요한 렌더링 최소화: React.memo나 shouldComponentUpdate와 같은 방법을 사용하여 불필요한 렌더링을 방지합니다.
작은 단위로 작업 분할: 애니메이션 프레임을 작은 단위로 분할하여 UI 렌더링 작업이 끝나지 않아도 프레임 업데이트를 수행할 수 있습니다.
쓰로틀링 및 디바운싱: requestAnimationFrame을 쓰로틀링하거나 디바운싱하여 불필요한 애니메이션 업데이트를 방지합니다.

애니메이션은 사용자 경험을 개선하는 데 중요한 요소입니다. Concurrent Mode를 이용하여 강력한 성능을 제공하는 자바스크립트 애니메이션을 개발할 수 있다는 것을 기억하시기 바랍니다. 애니메이션 개발 시 위의 패턴을 활용하고 Concurrent Mode의 성능 개선 기능을 적용하여 애니메이션을 부드럽고 반응성 있게 구현하세요.

참고 자료:

React Docs - Concurrent Mode
Animating with React, Redux, and D3 #React #애니메이션