React Concurrent Mode는 React의 새로운 기능으로, 사용자 인터페이스의 응답성과 사용자 경험을 개선하기 위해 개발되었습니다. 이 모드는 멀티 태스킹을 통해 빠른 애플리케이션 렌더링과 더 부드러운 애니메이션을 제공합니다.

애니메이션은 사용자 인터페이스에서 중요한 요소입니다. 그러나 자바스크립트로 애니메이션을 구현할 때 퍼포먼스 문제가 발생할 수 있습니다. 특히 많은 DOM 조작이 필요한 복잡한 애니메이션의 경우, 렌더링 성능이 저하될 수 있습니다.

이러한 문제를 해결하기 위해 React Concurrent Mode는 애니메이션을 더 부드럽게 만들고 성능을 향상시키는 몇 가지 방법을 제공합니다.

1. useTransition 훅을 사용하여 애니메이션 지연 제어하기

React Concurrent Mode에서는 새로운 useTransition 훅을 제공합니다. 이 훅은 애니메이션 시작 시점과 종료 시점을 조절하는 데 사용됩니다.

애니메이션 시작 시점에 startTransition 함수를 호출하여 애니메이션 전환을 지연시킬 수 있습니다. 이는 React가 애니메이션 시작 전에 다른 작업을 수행할 수 있도록 해줍니다. 애니메이션 종료 시점에는 isPending 속성을 사용하여 애니메이션이 계속 진행 중인지 확인할 수 있습니다.

import { useTransition } from 'react';

const Component = () => {
  const [isOpen, setIsOpen] = useState(false);
  const transitions = useTransition(isOpen, {
    enter: { opacity: 1 },
    from: { opacity: 0 },
    leave: { opacity: 0 },
    config: { duration: 300 },
  });

  return (
    <div>
      {transitions((style, item) =>
        item ? (
          <animated.div style={style}>애니메이션 내용</animated.div>
        ) : null
      )}
      <button onClick={() => setIsOpen(!isOpen)}>애니메이션 시작</button>
    </div>
  );
};

이 예제에서는 isOpen 상태에 따라 애니메이션을 조절하고 있습니다. useTransition 훅을 사용하여 isOpen 값을 전달하고, 애니메이션 시작과 종료 시점에서 필요한 스타일을 정의합니다. transitions 함수 내에서 애니메이션을 렌더링하고, setIsOpen 함수를 사용하여 애니메이션을 시작하거나 종료합니다.

2. React.memo를 사용하여 리렌더링 방지하기

애니메이션 컴포넌트는 자식 컴포넌트가 리렌더링되면 성능 저하가 발생할 수 있습니다. 예를 들어, 부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 함께 리렌더링되어 불필요한 DOM 조작이 발생할 수 있습니다.

React Concurrent Mode에서는 React.memo를 사용하여 자식 컴포넌트의 리렌더링을 방지할 수 있습니다. React.memo는 자식 컴포넌트의 props가 변경되지 않은 경우에만 리렌더링을 방지합니다.

const ChildComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

위 예제에서는 ChildComponent를 React.memo로 래핑하여 자식 컴포넌트의 리렌더링을 방지하고 있습니다. value prop이 변경되지 않은 경우에는 리렌더링이 발생하지 않습니다.

결론

React Concurrent Mode는 자바스크립트 애니메이션의 퍼포먼스 문제를 해결하기 위한 몇 가지 유용한 기능을 제공합니다. useTransition 훅을 사용하여 애니메이션을 지연시키고, React.memo를 사용하여 리렌더링을 방지하는 것은 효율적인 애니메이션 구현에 도움이 될 수 있습니다. React 공식 문서에서 제공되는 예제와 문서를 참고하여 자세한 내용을 알아보세요.

#React #애니메이션