[react] 애니메이션 및 전환 효과의 적용

26 Dec 2023

react

React 애플리케이션에서 사용자 경험을 향상시키기 위해 애니메이션과 전환효과를 적용하는 방법을 살펴보겠습니다. 이 글에서는 React 내에서 애니메이션 및 전환 효과를 구현하는 방법을 소개하고, CSS transition 및 React Transition Group을 사용하는 방법을 다룰 것입니다.

React Transition Group 활용

React Transition Group은 React 컴포넌트의 애니메이션을 위한 공식 라이브러리가 아니지만, 애니메이션을 손쉽게 구현할 수 있는 강력한 도구입니다. React Transition Group를 사용하여 컴포넌트의 마운트나 언마운트, 상태 변화에 따른 애니메이션 효과를 적용할 수 있습니다.

import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
};

const transitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 },
};

const FadeIn = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        Content
      </div>
    )}
  </Transition>
);

CSS Transition을 활용한 전환효과 구현

CSS transition을 이용하여 요소의 상태 변화에 따라 애니메이션을 적용할 수 있습니다. React에서 CSS transition을 사용하기 위해서는 해당 요소의 상태 변화를 감지하고 CSS 클래스를 추가하여 애니메이션을 적용하면 됩니다.

import React, { useState } from 'react';
import './styles.css'; // 해당 CSS 파일에 transition 효과를 정의

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        토글
      </button>
      <div className={`box ${isVisible ? 'visible' : 'hidden'}`}></div>
    </div>
  );
}

정리

React 애플리케이션에서는 React Transition Group 및 CSS transition을 활용하여 애니메이션 효과를 쉽게 구현할 수 있습니다. 애니메이션 및 전환효과를 적용하여 사용자 경험을 향상시키고, 웹 애플리케이션을 더욱 매력적으로 만들어보세요.

위 포스트에서는 React Transition Group를 사용한 컴포넌트 애니메이션 및 CSS transition을 이용한 전환 효과에 대해 다루었습니다. 사용하시는 상황에 맞게 적절한 기술을 선택하여 애니메이션 효과를 적용해 보시기 바랍니다.

References:

목차

React Transition Group 활용

CSS Transition을 활용한 전환효과 구현

정리