React에서 SVG 애니메이션 구현하기

React 프로젝트에서 SVG 애니메이션을 구현하는 것은 시각적으로 풍성한 UI를 만드는 데 매우 효과적입니다. 이번 글에서는 React에서 SVG 애니메이션을 간단히 적용하는 방법을 실무 중심으로 다뤄보겠습니다.

1. 기본 SVG 삽입하기

먼저, React 컴포넌트 내에 SVG 코드를 삽입합니다. JSX 문법을 이용해 직접 SVG 태그를 작성하거나, 외부 SVG 파일을 임포트할 수 있습니다.

const Logo = () => (
  <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <circle cx="60" cy="60" r="50" stroke="blue" strokeWidth="4" fill="lightblue" />
  </svg>
);

export default Logo;

2. CSS 애니메이션 적용하기

SVG 애니메이션을 가장 쉽게 만드는 방법 중 하나는 CSS를 활용하는 것입니다. SVG 요소에 대해 stroke-dasharray와 stroke-dashoffset 속성을 활용하여 선을 그리는 효과를 낼 수 있습니다.

const AnimatedCircle = () => (
  <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <circle
      cx="60"
      cy="60"
      r="50"
      stroke="tomato"
      strokeWidth="4"
      fill="none"
      style={{
        strokeDasharray: 314, // 원 둘레 2πr
        strokeDashoffset: 314,
        animation: 'draw 2s forwards'
      }}
    />
    <style>
      {`@keyframes draw {
        to { stroke-dashoffset: 0; }
      }`}
    </style>
  </svg>
);

export default AnimatedCircle;

3. React Spring과 같은 라이브러리 활용하기

더 자연스러운 애니메이션을 위해 React Spring 같은 라이브러리를 사용할 수 있습니다. React Spring은 리액티브 방식으로 애니메이션 값을 제어하기 용이하여 복잡한 SVG 애니메이션에 적합합니다.

import { useSpring, animated } from 'react-spring';

const SpringCircle = () => {
  const props = useSpring({ strokeDashoffset: 0, from: { strokeDashoffset: 314 }, config: { duration: 2000 } });

  return (
    <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
      <animated.circle
        cx="60"
        cy="60"
        r="50"
        stroke="green"
        strokeWidth="4"
        fill="none"
        strokeDasharray="314"
        strokeDashoffset={props.strokeDashoffset}
      />
    </svg>
  );
};

export default SpringCircle;

4. 실무 팁

• SVG 뷰박스(viewBox)를 명확히 설정해 반응형으로 만듭니다.
• 애니메이션 성능 최적화를 위해 변형(transform) 속성을 적절히 사용하세요.
• 애니메이션 라이브러리 선택 시 프로젝트 복잡도와 유지보수성을 고려해야 합니다.

React에서 SVG 애니메이션은 위와 같은 방법으로 손쉽게 구현할 수 있습니다. 프로젝트 요구사항에 맞는 방식을 선택해 다채로운 UI 효과를 만드세요.