Redux Thunk를 활용한 애플리케이션 로딩 스피너 구현 방법

18 Oct 2023

redux

애플리케이션을 개발할 때, 데이터를 불러오는 동안 사용자에게 로딩 상태를 알려주는 기능은 매우 중요합니다. Redux Thunk를 활용하여 애플리케이션 로딩 스피너를 구현하는 방법을 알아보겠습니다.

1. Redux Thunk 설치하기

Redux Thunk는 Redux 미들웨어로, 비동기 작업을 처리할 수 있도록 도와줍니다. Redux Thunk를 사용하기 위해 아래의 명령어를 실행하여 설치합니다.

npm install redux-thunk

또는

yarn add redux-thunk

2. Redux Store 설정하기

Redux Thunk를 사용하기 위해 애플리케이션의 Redux Store를 설정해야 합니다. createStore 함수를 사용하여 Store를 생성하고, applyMiddleware 함수를 사용하여 Redux Thunk 미들웨어를 적용합니다.

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

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

export default store;

3. 액션 생성자 함수 작성하기

로딩 스피너를 제어하기 위해 액션 생성자 함수를 작성해야 합니다. 이 함수는 비동기 작업을 시작할 때 로딩 상태를 변경하는 액션을 생성합니다. 예를 들어, 데이터를 불러오는 API 호출이 시작될 때 FETCH_DATA_REQUEST 액션을 디스패치하고 로딩 상태를 true로 변경합니다.

import { FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from './actionTypes';

export const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: FETCH_DATA_REQUEST });
    
    // 비동기 작업을 수행하고 데이터를 받아온 후 성공/실패에 따라 액션을 디스패치합니다.
    api.fetchData()
      .then((data) => dispatch({ type: FETCH_DATA_SUCCESS, payload: data }))
      .catch((error) => dispatch({ type: FETCH_DATA_FAILURE, payload: error }));
  };
};

4. 로딩 스피너 컴포넌트 작성하기

로딩 스피너를 표시하기 위해 컴포넌트를 작성해야 합니다. 이 컴포넌트는 Redux의 상태를 구독하고, 로딩 상태가 true일 때 로딩 스피너를 표시합니다.

import React from 'react';
import { connect } from 'react-redux';

const Spinner = ({ loading }) => {
  if (!loading) {
    return null;
  }
  
  return (
    <div className="spinner">
      {/* 로딩 스피너 컴포넌트의 내용 */}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    loading: state.loading
  };
};

export default connect(mapStateToProps)(Spinner);

5. 사용하기

이제 Redux Thunk를 활용한 애플리케이션 로딩 스피너를 사용할 준비가 되었습니다. 원하는 컴포넌트에서 fetchData 액션 생성자 함수를 디스패치하여 데이터를 불러오면, 로딩 스피너가 표시될 것입니다.

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

const App = ({ fetchData, loading, data }) => {
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <Spinner />
      ) : (
        <div>
          {/* 데이터를 표시하는 컴포넌트 */}
        </div>
      )}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    loading: state.loading,
    data: state.data
  };
};

const mapDispatchToProps = {
  fetchData
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

위의 예시는 Redux Thunk를 사용하여 애플리케이션의 로딩 상태를 관리하고 로딩 스피너를 구현하는 방법을 보여줍니다. 이를 활용하여 개발 중인 애플리케이션에 로딩 스피너를 구현해보세요.

더 자세한 정보는 Redux 공식 문서를 참고하시기 바랍니다.

#React #Redux #Thunk