Redux Thunk를 활용한 애니메이션 효과 커스터마이징 방법

18 Oct 2023

redux

이 글에서는 Redux Thunk를 사용하여 애니메이션 효과를 커스터마이징하는 방법에 대해 알아보겠습니다. Redux Thunk는 Redux의 미들웨어로, 비동기 작업을 처리하는 데 도움이 됩니다.

Redux Thunk 소개

Redux Thunk는 액션 생성자 함수가 일반 객체 대신 함수를 반환할 수 있게 해줍니다. 이 함수는 호출될 때 Redux의 dispatch 메소드를 사용할 수 있습니다. 이를 통해 비동기 작업이나 사이드 이펙트를 처리할 수 있습니다.

애니메이션 효과 커스터마이징

Redux Thunk 설치하기

다음 명령어를 사용하여 Redux Thunk를 프로젝트에 설치합니다.
```
npm install redux-thunk
```

Redux Thunk 미들웨어 설정하기

Redux Store를 생성할 때, applyMiddleware 함수를 사용하여 Redux Thunk 미들웨어를 적용합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

액션 생성자 함수 작성하기

애니메이션 효과를 커스터마이징하기 위해, 액션 생성자 함수에 비동기 작업을 추가합니다. 이를 위해 Redux Thunk를 사용합니다.
```
export const startAnimation = () => {
  return (dispatch) => {
    dispatch({ type: 'ANIMATION_START' });

    setTimeout(() => {
      dispatch({ type: 'ANIMATION_END' });
    }, 1000);
  };
};
```
위의 예시에서는 ANIMATION_START 액션을 디스패치한 후 1초 뒤에 ANIMATION_END 액션을 디스패치하고 있습니다.

컴포넌트에서 액션 디스패치하기

애니메이션 효과를 적용하고 싶은 컴포넌트에서 Redux의 dispatch 메소드를 통해 액션을 디스패치합니다.

import React from 'react';
import { connect } from 'react-redux';
import { startAnimation } from '../actions';

const AnimatedComponent = ({ startAnimation }) => {
  const handleClick = () => {
    startAnimation();
  };

  return (
    <div>
      <button onClick={handleClick}>애니메이션 시작</button>
    </div>
  );
};

export default connect(null, { startAnimation })(AnimatedComponent);

위의 예시에서는 startAnimation 액션 생성자 함수를 컴포넌트에 연결하고, 버튼 클릭 시 해당 액션을 디스패치하도록 설정하였습니다.

마무리

이렇게 Redux Thunk를 활용하여 애니메이션 효과를 커스터마이징할 수 있습니다. Redux Thunk는 비동기 작업 처리를 간편하게 해주므로, Redux를 사용하는 프로젝트에서 유용하게 활용될 수 있습니다. 추가적인 정보는 Redux Thunk 문서를 참고하시기 바랍니다.

#React #Redux #ReduxThunk