Redux Thunk를 활용한 웹 알림 기능 추가 방법

18 Oct 2023

redux

소개

웹 애플리케이션에서 알림 기능은 사용자들에게 중요한 정보를 전달하고 상호작용할 수 있는 기회를 제공하는 중요한 요소입니다. Redux Thunk는 Redux 미들웨어로 비동기 작업을 처리할 수 있도록 도와주는 도구입니다. 이 기능을 활용하여 웹 알림 기능을 추가하는 방법에 대해 알아보겠습니다.

단계별 설명

1. Redux Thunk 설치하기

먼저, 프로젝트에 Redux Thunk를 설치해야 합니다. 다음 명령어를 사용하여 설치합니다:

npm install redux-thunk

또는

yarn add redux-thunk

2. Redux 스토어에 Thunk 미들웨어 추가하기

Redux 스토어를 생성할 때 Thunk 미들웨어를 추가해야 합니다. createStore 함수를 사용하여 스토어를 생성하고, applyMiddleware 함수를 사용하여 Thunk 미들웨어를 추가합니다. 다음과 같이 코드를 작성합니다:

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

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

3. 웹 알림 동작을 위한 액션 및 액션 크리에이터 작성하기

이제 웹 알림 동작을 위한 액션과 액션 크리에이터를 작성해야 합니다. 액션은 Redux 스토어에 전달할 정보를 담고 있으며, 액션 크리에이터는 액션을 생성하는 함수입니다. 예를 들어, showNotification 액션과 그에 해당하는 액션 크리에이터를 다음과 같이 작성할 수 있습니다:

const SHOW_NOTIFICATION = 'SHOW_NOTIFICATION';

const showNotification = (message) => ({
    type: SHOW_NOTIFICATION,
    payload: message
});

4. Thunk 액션 크리에이터 작성하기

Thunk를 사용하여 비동기 작업을 처리할 수 있는 액션 크리에이터를 작성해야 합니다. 이 액션 크리에이터는 실제 알림을 보내는 비동기 작업을 수행한 후에 알림을 보여주는 액션을 호출합니다. 예를 들어, sendNotification 액션 크리에이터를 다음과 같이 작성할 수 있습니다:

const sendNotification = (message) => {
    return (dispatch) => {
        // 알림을 보내는 비동기 작업 수행
        sendNotificationAPI(message)
            .then(() => {
                // 알림을 보여주는 액션 호출
                dispatch(showNotification(message));
            })
            .catch((error) => {
                console.error('알림 보내기 실패:', error);
            });
    };
};

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

마지막으로, 웹 알림을 보내기 위해 컴포넌트에서 Thunk 액션 크리에이터를 디스패치해야 합니다. 이렇게 하면 액션을 스토어로 전달하고 비동기 작업이 수행됩니다. 예를 들어, 버튼을 클릭하여 알림을 보내는 컴포넌트를 다음과 같이 작성할 수 있습니다:

import React from 'react';
import { useDispatch } from 'react-redux';
import { sendNotification } from '../actions/notificationActions';

const NotificationButton = () => {
    const dispatch = useDispatch();

    const handleClick = () => {
        dispatch(sendNotification('새로운 알림이 도착했습니다!'));
    };

    return (
        <button onClick={handleClick}>알림 보내기</button>
    );
};

결론

Redux Thunk를 사용하여 웹 알림 기능을 추가하는 방법에 대해 알아보았습니다. Thunk를 사용하면 비동기 작업을 처리하고, 알림을 보내는 동작을 스토어와 상호작용하는 액션으로 관리할 수 있습니다. 이를 통해 웹 애플리케이션에 유용한 알림 기능을 쉽게 구현할 수 있습니다.

참고 자료: