애니메이션은 웹 애플리케이션에서 사용자 경험을 향상시킬 수 있는 강력한 기능입니다. 이번 글에서는 React의 Custom Hook을 활용하여 간편하게 애니메이션 기능을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 함수 컴포넌트에서 상태 관리나 부작용 로직을 재사용하기 위한 방법입니다. 기존의 로직을 함수로 분리하여 재사용할 수 있기 때문에 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다. Custom Hook은 use라는 접두사로 시작하는 함수를 작성하여 사용합니다.

애니메이션 기능을 위한 Custom Hook 작성하기

React에서 애니메이션을 구현하기 위해서는 주로 CSS transition과 JavaScript 애니메이션 라이브러리를 활용합니다. 이번 예시에서는 CSS transition을 활용하도록 하겠습니다.

import { useState, useEffect } from 'react';

const useAnimation = (initialState, animationDuration) => {
  const [isAnimating, setIsAnimating] = useState(initialState);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setIsAnimating(false);
    }, animationDuration);

    return () => {
      clearTimeout(timeout);
    };
  }, [animationDuration]);

  return isAnimating;
};

export default useAnimation;

위의 코드에서 useAnimation이라는 Custom Hook을 작성하였습니다. 애니메이션을 적용할 요소에 isAnimating 상태를 적용하고, animationDuration 시간 이후에 애니메이션을 멈추도록 구현하였습니다.

Custom Hook 사용 예시

이제 작성한 Custom Hook을 사용하여 애니메이션 기능을 구현해보겠습니다. 다음은 버튼 클릭 시 2초 동안 애니메이션이 진행되는 예시입니다.

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

const AnimationExample = () => {
  const isAnimating = useAnimation(false, 2000);

  const handleClick = () => {
    setIsAnimating(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Animate</button>
      <div className={`box ${isAnimating ? 'animate' : ''}`}></div>
    </div>
  );
};

export default AnimationExample;

위의 예시에서 useAnimation Hook을 사용하여 isAnimating 상태를 가져온 후, 이를 이용하여 애니메이션을 트리거합니다. 애니메이션을 적용할 요소에는 box 클래스와 animate 클래스를 추가하여 애니메이션 효과를 적용하였습니다.

결론

React의 Custom Hook을 활용하면 애니메이션과 같은 기능을 간편하게 구현할 수 있습니다. Custom Hook을 작성하여 코드의 재사용성과 유지 보수성을 향상시키며, 웹 애플리케이션에서 좀 더 멋진 사용자 경험을 제공할 수 있습니다.

참고: React Custom Hooks