React에서 애니메이션 추가하기

 

React 애플리케이션에 애니메이션을 추가하면 더 매력적이고 사용자 친화적인 UI를 만들 수 있습니다. React는 기본적으로 애니메이션 기능을 제공하지 않지만, 다양한 라이브러리와 CSS를 사용해 애니메이션을 손쉽게 구현할 수 있습니다. 이번 글에서는 React에서 애니메이션을 추가하는 기본 방법과 주요 라이브러리, 실제 사용 예제를 살펴보겠습니다.

---

1. CSS를 활용한 애니메이션

React 컴포넌트에 CSS를 활용해 애니메이션을 추가할 수 있습니다. CSS 애니메이션은 간단한 동작 효과를 적용할 때 유용합니다.

1-1. 기본 CSS 애니메이션

CSS의 @keyframes를 사용하여 애니메이션을 정의하고, 이를 클래스에 적용합니다.

/* styles.css */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 2s ease-in;
}

// FadeInComponent.jsx
import './styles.css';

function FadeInComponent() {
  return <div className="fade-in">React에서 CSS 애니메이션 추가하기!</div>;
}

export default FadeInComponent;

1-2. CSS-in-JS를 활용한 애니메이션

CSS-in-JS 라이브러리를 사용하면 스타일과 애니메이션을 코드에 통합할 수 있습니다.

import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

const FadeInDiv = styled.div`
  animation: ${fadeIn} 2s ease-in;
`;

function FadeInComponent() {
  return <FadeInDiv>CSS-in-JS로 애니메이션 추가하기!</FadeInDiv>;
}

export default FadeInComponent;

---

2. React Transition Group

React Transition Group은 React에서 컴포넌트의 마운트 및 언마운트 시 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

2-1. 설치

npm install react-transition-group

2-2. 기본 사용 예제

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css';

function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="fade-box">애니메이션 박스</div>
      </CSSTransition>
    </div>
  );
}

export default App;

/* styles.css */
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

---

3. Framer Motion

Framer Motion은 React에서 모던하고 직관적인 애니메이션을 구현할 수 있는 강력한 라이브러리입니다.

3-1. 설치

npm install framer-motion

3-2. 기본 사용 예제

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 1 }}
    >
      Framer Motion 애니메이션!
    </motion.div>
  );
}

export default App;

3-3. 인터랙티브 애니메이션

Framer Motion은 사용자의 상호작용에 따라 애니메이션을 적용할 수도 있습니다.

import { motion } from 'framer-motion';

function InteractiveButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      클릭 애니메이션 버튼
    </motion.button>
  );
}

export default InteractiveButton;

---

4. React Spring

React Spring은 자연스러운 애니메이션을 구현할 때 적합한 라이브러리입니다.

4-1. 설치

npm install @react-spring/web

4-2. 기본 사용 예제

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

function App() {
  const styles = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    config: { duration: 1000 },
  });

  return <animated.div style={styles}>React Spring 애니메이션!</animated.div>;
}

export default App;

4-3. 드래그 가능한 애니메이션

React Spring은 물리 기반 애니메이션을 쉽게 구현할 수 있습니다.

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

function DraggableBox() {
  const [props, api] = useSpring(() => ({ x: 0, y: 0 }));

  return (
    <animated.div
      style={{
        ...props,
        width: 100,
        height: 100,
        background: 'lightblue',
        position: 'absolute',
      }}
      draggable
      onDrag={(e) => api.start({ x: e.clientX, y: e.clientY })}
    />
  );
}

export default DraggableBox;

---

5. 애니메이션 구현 시 주의사항

1. 성능 최적화
   • 애니메이션을 적용할 때 GPU 가속이 가능한 CSS 속성(transform, opacity)을 사용하는 것이 좋습니다.
   • 지나치게 복잡한 애니메이션은 렌더링 성능에 영향을 줄 수 있으므로 주의해야 합니다.
2. 적절한 라이브러리 선택
   • 단순한 애니메이션은 CSS나 React Transition Group으로 구현하는 것이 적합합니다.
   • 고급 애니메이션이나 인터랙션이 필요한 경우 Framer Motion 또는 React Spring을 사용하는 것이 효과적입니다.
3. 유연성과 확장성 고려
   • 재사용 가능한 애니메이션 컴포넌트를 설계하면 유지보수성과 확장성을 높일 수 있습니다.

---

결론

React에서 애니메이션을 추가하는 방법은 다양하며, 프로젝트 요구사항에 따라 적합한 방법과 라이브러리를 선택하면 됩니다. CSS를 활용한 간단한 애니메이션부터 Framer Motion과 같은 고급 애니메이션 라이브러리까지 다룰 수 있는 방법을 익히고, 실제 프로젝트에서 활용해 보세요. 매력적인 UI는 사용자 경험을 더욱 풍부하게 만들어 줄 것입니다!