자바스크립트 Redux Thunk를 이용한 비동기 처리

18 Oct 2023

redux

자바스크립트에서 비동기 처리는 웹 애플리케이션의 성능을 향상시키는 데 중요한 역할을 합니다. Redux Thunk는 Redux 미들웨어로, 비동기 작업을 쉽게 처리할 수 있게 도와줍니다. 이번 글에서는 Redux Thunk를 이용한 비동기 처리에 대해 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux 애플리케이션에서 비동기 작업을 처리하는 미들웨어입니다. 기본적으로 Redux는 동기적인 작업만 처리할 수 있기 때문에, 비동기 작업을 처리하기 위해 Redux Thunk를 사용합니다. Redux Thunk를 사용하면 액션 생성자 내에서 비동기 작업을 수행하고, 액션을 반환하는 함수를 만들 수 있습니다.

Redux Thunk 사용 방법

Redux Thunk 설치

우선 Redux Thunk를 사용하기 위해 패키지를 설치해야 합니다. 다음 명령어로 Redux Thunk 패키지를 설치합니다.
```
npm install redux-thunk
```
Redux Thunk 미들웨어 적용

Redux Thunk 미들웨어를 Redux에 적용해야합니다. createStore 함수를 사용하여 스토어를 생성할 때, 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를 사용하여 비동기 작업을 처리하는 액션 생성자를 작성합니다. 이 액션 생성자는 실제로 액션 객체를 반환하는 함수입니다. 비동기 작업을 처리할 때 사용할 수 있는 dispatch 함수를 인자로 받아서 사용할 수 있습니다.
```
import axios from 'axios';

export const fetchUsers = () => {
  return (dispatch) => {
    dispatch(fetchUsersRequest());
    axios.get('https://api.example.com/users')
      .then(response => {
        const users = response.data;
        dispatch(fetchUsersSuccess(users));
      })
      .catch(error => {
        const errorMessage = error.message;
        dispatch(fetchUsersFailure(errorMessage));
      });
  };
};
```
위의 예시에서는 비동기 작업으로 사용자 데이터를 가져와서 액션을 생성합니다. 비동기 작업이 시작될 때와 성공 또는 실패 시에 각각 액션을 디스패치합니다.

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

컴포넌트에서 비동기 작업을 처리하기 위해 액션을 디스패치할 수 있습니다. connect 함수를 사용하여 컴포넌트를 Redux 스토어에 연결하고, 액션을 디스패치할 수 있는 함수를 props로 받아와 사용합니다.

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchUsers } from './actions';

const UsersList = ({ users, fetchUsers }) => {
  useEffect(() => {
    fetchUsers();
  }, []);

  // render users list
}

const mapStateToProps = state => {
  return {
    users: state.users
  };
};

export default connect(mapStateToProps, { fetchUsers })(UsersList);

컴포넌트의 useEffect 훅을 사용하여 컴포넌트가 렌더링될 때 fetchUsers 액션을 디스패치합니다.

마무리

이번 글에서는 자바스크립트 Redux Thunk를 이용한 비동기 처리에 대해 알아보았습니다. Redux Thunk를 사용하면 Redux 애플리케이션에서 비동기 작업을 쉽게 처리할 수 있습니다. 비동기 작업을 위해 Redux Thunk를 사용하여 효율적인 애플리케이션을 개발해보세요!

참고 자료: