애니메이션은 웹 애플리케이션에서 사용자 경험을 향상시키는 데 매우 중요한 역할을 합니다. 이를 통해 사용자에게 동적이고 흥미로운 화면 전환이 제공됩니다. React 애플리케이션에서 애니메이션을 구현하려면 Custom Hook을 사용하여 쉽고 재사용 가능한 코드를 작성할 수 있습니다.

Custom Hook 만들기

우선, 애니메이션 효과를 적용하기 위한 Custom Hook을 만들어 보겠습니다. 아래의 예제 코드는 useAnimation이라는 Custom Hook을 생성합니다.

import { useState, useEffect } from 'react';

const useAnimation = (initialValue, animationDuration) => {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    const timer = setTimeout(() => {
      setValue(!value);
    }, animationDuration);

    return () => clearTimeout(timer);
  }, [value, animationDuration]);

  return value;
};

export default useAnimation;

위 코드에서 useAnimation Custom Hook은 initialValue와 animationDuration 두 개의 매개변수를 가지고 있습니다. value 상태와 setValue 함수를 사용하여 애니메이션 재생 여부를 관리합니다. useEffect 훅을 사용하여 지정된 시간이 지난 뒤 상태를 반전시키고, clearTimeout 함수를 사용하여 타이머를 초기화합니다.

애니메이션 적용하기

애니메이션 효과를 추가할 구성 요소 내에서 Custom Hook을 호출하여 사용할 수 있습니다. 아래의 예제 코드는 fade-in 클래스를 통해 컴포넌트가 부드럽게 나타나게 하는 애니메이션 효과를 구현합니다.

import React from 'react';
import useAnimation from './useAnimation';

const FadeInComponent = () => {
  const isVisible = useAnimation(false, 1000);

  return (
    <div className={`fade-in ${isVisible ? 'visible' : 'hidden'}`}>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default FadeInComponent;

위 코드에서 useAnimation Custom Hook을 호출하고 isVisible 변수를 통해 반환된 값을 받아옵니다. isVisible 값에 따라 fade-in visible 또는 fade-in hidden 클래스를 동적으로 적용하여 애니메이션을 제어합니다.

애니메이션 효과를 추가하기 위해 CSS 스타일시트에 다음과 같은 코드를 추가해 주세요.

.fade-in {
  opacity: 0;
  transition: opacity 1s;
}

.fade-in.visible {
  opacity: 1;
}

.fade-in.hidden {
  opacity: 0;
}

결론

Custom Hook을 이용하여 애니메이션 효과를 추가하는 방법을 알아보았습니다. useAnimation Custom Hook을 만들어서 재사용성을 높인다면, 여러 컴포넌트에서 동일한 애니메이션 효과를 쉽게 적용할 수 있습니다. 더 나아가, Custom Hook을 통해 애니메이션의 지속 시간, 초기 상태 등을 동적으로 제어할 수 있어 더욱 유연한 애니메이션 구현이 가능합니다.

#React #애니메이션