Redux Thunk를 활용한 애니메이션 효과 구현 방법

18 Oct 2023

redux

많은 웹 개발자들이 Redux를 사용하여 상태 관리를 하고 있습니다. 그런데, 상태 관리만으로는 애니메이션 효과를 적용하는 것이 쉽지 않을 수 있습니다. 이때 Redux Thunk를 활용하면 비동기 액션과 상태 변화를 조합하여 애니메이션 효과를 쉽게 구현할 수 있습니다.

Redux Thunk란 무엇인가요?

Redux Thunk는 Redux와 함께 사용되는 미들웨어입니다. 이 미들웨어를 사용하면 액션 생성자 함수에서 비동기 작업을 처리할 수 있습니다. 일반적으로 Redux에서는 동기적인 액션만을 처리하는데, Redux Thunk를 사용하면 비동기 작업을 처리할 수 있게 됩니다.

애니메이션 효과 구현하기

먼저, Redux Thunk를 프로젝트에 설치해야 합니다. npm install redux-thunk 명령어를 사용하여 설치합니다.
액션 생성자 함수를 작성합니다. 애니메이션 효과에 필요한 상태를 변경하는 액션을 생성하는 함수를 작성합니다. 이때, 비동기 작업을 처리하기 위해 Redux Thunk를 사용합니다. 예를 들어, 다음과 같이 액션 생성자 함수를 작성할 수 있습니다.

import { animateItem } from './actions';

export const startAnimation = () => {
  return (dispatch, getState) => {
    dispatch(animateItem());

    // 애니메이션 효과에 필요한 비동기 작업 수행
    setTimeout(() => {
      // 비동기 작업 완료 후 상태 변경 액션을 디스패치
      dispatch(stopAnimation());
    }, 1000);
  };
};

리듀서를 작성합니다. 애니메이션 효과를 처리하는 리듀서를 작성합니다. 이때, 상태 변경과 관련된 액션을 처리하는 코드를 작성합니다.

import { ANIMATE_ITEM, STOP_ANIMATION } from './actionTypes';

const initialState = {
  isAnimating: false
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ANIMATE_ITEM:
      return {
        ...state,
        isAnimating: true
      };
    case STOP_ANIMATION:
      return {
        ...state,
        isAnimating: false
      };
    default:
      return state;
  }
};

컴포넌트에서 애니메이션 효과를 사용합니다. 애니메이션 효과를 적용하고 싶은 컴포넌트에서 Redux Thunk를 사용해 액션 생성자 함수를 호출합니다.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { startAnimation } from './animationActions';

const AnimatedComponent = () => {
  const dispatch = useDispatch();
  const isAnimating = useSelector(state => state.animation.isAnimating);

  useEffect(() => {
    dispatch(startAnimation());
  }, [dispatch]);

  return (
    <div>
      {isAnimating ? <div className="animate">애니메이션 효과</div> : <div>애니메이션 종료</div>}
    </div>
  );
};

마무리

Redux Thunk를 활용하여 애니메이션 효과를 구현하는 방법에 대해 알아보았습니다. Redux Thunk는 비동기 작업을 처리하는 것을 도와주어 애니메이션과 같은 효과를 쉽게 구현할 수 있습니다. 위의 예시를 참고하여 프로젝트에 애니메이션 효과를 적용해보세요!

#redux #animation