Redux Thunk를 사용한 드롭다운 메뉴 구현 예제

18 Oct 2023

redux

이 예제는 Redux Thunk를 사용하여 드롭다운 메뉴를 구현하는 방법을 보여줍니다. Redux Thunk는 비동기 작업을 처리하기 위해 Redux에서 사용되는 미들웨어입니다.

프로젝트 설정

먼저, Redux와 Redux Thunk를 설치합니다.

npm install redux redux-thunk

다음으로, Redux store를 설정합니다. store.js 파일을 생성하고 아래의 코드를 추가합니다.

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

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

export default store;

액션과 리듀서 설정

액션 타입과 액션 생성자 함수를 정의합니다. actions.js 파일을 생성하고 아래의 코드를 추가합니다.

export const SET_MENU_ITEMS = 'SET_MENU_ITEMS';
export const TOGGLE_DROPDOWN = 'TOGGLE_DROPDOWN';

export const setMenuItems = (items) => {
  return {
    type: SET_MENU_ITEMS,
    payload: items
  }
}

export const toggleDropdown = () => {
  return {
    type: TOGGLE_DROPDOWN
  }
}

다음으로, 리듀서를 작성합니다. reducer.js 파일을 생성하고 아래의 코드를 추가합니다.

import { SET_MENU_ITEMS, TOGGLE_DROPDOWN } from './actions';

const initialState = {
  menuItems: [],
  isDropdownOpen: false
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_MENU_ITEMS:
      return {
        ...state,
        menuItems: action.payload
      }
    case TOGGLE_DROPDOWN:
      return {
        ...state,
        isDropdownOpen: !state.isDropdownOpen
      }
    default:
      return state;
  }
}

export default reducer;

비동기 작업 처리

드롭다운 메뉴에서 비동기로 데이터를 가져오는 작업을 처리하기 위해 Redux Thunk를 사용합니다. actions.js 파일에 아래의 코드를 추가합니다.

export const fetchMenuItems = () => {
  return (dispatch) => {
    // API로부터 데이터를 가져오는 비동기 작업을 수행
    // 비동기 작업이 완료되면 액션을 디스패치하여 상태를 업데이트
    API.get('/menuItems')
      .then((response) => {
        dispatch(setMenuItems(response.data));
      })
      .catch((error) => {
        console.log(error);
      });
  }
}

컴포넌트 구현

드롭다운 메뉴를 렌더링하는 컴포넌트를 구현합니다. DropdownMenu.js 파일을 생성하고 아래의 코드를 추가합니다.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchMenuItems, toggleDropdown } from './actions';

const DropdownMenu = () => {
  const dispatch = useDispatch();
  const menuItems = useSelector(state => state.menuItems);
  const isDropdownOpen = useSelector(state => state.isDropdownOpen);

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

  const handleDropdownToggle = () => {
    dispatch(toggleDropdown());
  }

  return (
    <div className="dropdown">
      <button className="dropdown-toggle" onClick={handleDropdownToggle}>
        Toggle Dropdown
      </button>
      {isDropdownOpen && (
        <ul className="dropdown-menu">
          {menuItems.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DropdownMenu;

애플리케이션에서 사용

마지막으로, 애플리케이션에서 DropdownMenu 컴포넌트를 사용합니다. App.js 파일에 아래의 코드를 추가합니다.

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import DropdownMenu from './DropdownMenu';

const App = () => {
  return (
    <Provider store={store}>
      <div className="app">
        <h1>Dropdown Menu Example</h1>
        <DropdownMenu />
      </div>
    </Provider>
  );
}

export default App;

이제 Redux Thunk를 사용하여 드롭다운 메뉴를 비동기로 로드하고 상태를 업데이트할 수 있는 예제가 완성되었습니다.

프로젝트 설정

액션과 리듀서 설정

비동기 작업 처리

컴포넌트 구현

애플리케이션에서 사용

참고 자료