이번 글에서는 Redux Thunk를 사용하여 반응형 레이아웃을 구현하는 방법에 대해 알아보겠습니다. Redux Thunk는 Redux 미들웨어 중 하나로, 비동기 로직을 처리하기 위해 사용됩니다.

1. Redux Thunk 설치하기

먼저 Redux Thunk를 설치해야 합니다. 아래 명령어를 사용하여 npm을 통해 Redux Thunk를 설치할 수 있습니다.

npm install redux-thunk

또는 yarn을 사용하신다면 아래 명령어를 사용하세요.

yarn add redux-thunk

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

Redux Thunk를 사용하여 비동기 로직을 처리하기 위해서는 액션 생성자 함수를 작성해야 합니다. 이 함수는 일반적인 Redux 액션과는 달리 비동기 작업을 포함할 수 있습니다. Redux Thunk는 이 함수를 통해 비동기 작업에 대한 처리를 수행합니다.

import { getLayoutData } from "../api/layoutApi";

export const fetchLayoutData = () => {
  return async (dispatch) => {
    try {
      const data = await getLayoutData();
      dispatch({
        type: "FETCH_LAYOUT_DATA_SUCCESS",
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: "FETCH_LAYOUT_DATA_FAILURE",
        payload: error.message,
      });
    }
  };
};

위 코드는 비동기 작업을 수행하는 fetchLayoutData 액션 생성자 함수의 예시입니다. 이 함수는 getLayoutData()라는 API 메서드를 호출하고, API에서 받아온 데이터를 액션의 payload로 저장한 후, 성공 여부에 따라 액션을 디스패치합니다.

3. 미들웨어 등록하기

Redux Thunk를 사용하기 위해서는 Redux Store에 미들웨어를 등록해야 합니다. 이를 위해 applyMiddleware 함수를 사용합니다.

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

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

위 코드는 Redux Store를 생성하고 Redux Thunk 미들웨어를 등록하는 예시입니다. applyMiddleware 함수에 thunk를 인자로 전달하여 Redux Store에서 Redux Thunk를 사용할 수 있도록 설정합니다.

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

마지막으로, 컴포넌트에서 액션을 디스패치하여 Redux Thunk를 사용하는 방법에 대해 알아보겠습니다.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchLayoutData } from "../actions/layoutActions";

const Layout = () => {
  const dispatch = useDispatch();
  const layoutData = useSelector((state) => state.layoutData);

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

  return (
    <div>
      {/* 레이아웃 컴포넌트 내용 */}
    </div>
  );
};

export default Layout;

위 코드는 컴포넌트에서 useDispatch 훅을 사용하여 액션을 디스패치하는 예시입니다. fetchLayoutData 액션 생성자 함수를 dispatch 함수와 함께 호출하여 비동기 작업을 수행합니다. 이후, 액션의 결과는 useSelector 훅을 통해 컴포넌트 내에서 참조할 수 있습니다.

마무리

이렇게 Redux Thunk를 활용하여 반응형 레이아웃을 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 비동기 작업을 간편하게 처리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다. 추가적으로 Redux Thunk와 관련된 자세한 내용은 공식 문서를 참고하시기 바랍니다.

#redux #redux-thunk