이 예제에서는 Redux Thunk를 사용하여 마우스 오버 이벤트를 처리하는 방법을 살펴보겠습니다. Redux Thunk는 Redux의 미들웨어로서 액션 생성자 함수에서 비동기 작업을 수행할 수 있게 해줍니다.
1. Redux Thunk 설정하기
Redux Thunk를 사용하기 위해 먼저 Redux와 Redux Thunk를 설치해야 합니다. 다음 명령어를 사용하여 설치합니다.
npm install redux redux-thunk
설치가 완료되면 Redux Thunk를 사용할 수 있게 하기 위해 Redux Store를 생성할 때 applyMiddleware 함수를 사용하여 Redux Thunk 미들웨어를 적용해야 합니다.
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
2. 액션 생성자 함수 작성하기
마우스 오버 이벤트를 처리하는 액션 생성자 함수를 작성해야 합니다. 이 함수는 실제 비동기 작업을 수행하고, 액션 객체를 반환하는 역할을 합니다. 예를 들어, 마우스 오버 이벤트가 발생할 때 API를 호출하여 데이터를 가져오는 경우를 가정해 봅시다.
export const fetchData = () => {
return async dispatch => {
try {
// API 호출 및 데이터 가져오기
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 데이터를 사용하여 액션 객체 생성
const action = {
type: 'FETCH_DATA_SUCCESS',
payload: data
}
// 액션 디스패치
dispatch(action);
} catch (error) {
// 에러 발생 시 액션 디스패치
const action = {
type: 'FETCH_DATA_FAILURE',
error: error.message
}
dispatch(action);
}
}
};
3. 컴포넌트에서 액션 디스패치하기
마우스 오버 이벤트를 처리할 컴포넌트에서 액션을 디스패치하여 비동기 작업을 시작해야 합니다. 이를 위해 Redux의 connect 함수를 사용하여 컴포넌트를 Redux Store에 연결하고, 액션 생성자 함수를 props에 매핑해야 합니다.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';
class MouseOverComponent extends Component {
handleMouseOver = () => {
// 마우스 오버 이벤트 발생 시 액션 디스패치
this.props.fetchData();
}
render() {
return (
<div onMouseOver={this.handleMouseOver}>
마우스 오버 이벤트 처리 예제
</div>
);
}
}
export default connect(null, { fetchData })(MouseOverComponent);
결론
이렇게 Redux Thunk를 사용하여 마우스 오버 이벤트를 처리하는 예제를 살펴보았습니다. Redux Thunk를 사용하면 비동기 작업을 쉽게 처리할 수 있고, 액션 생성자 함수에서 API 호출 등의 작업을 하기에 용이합니다. 이를 통해 Redux 애플리케이션의 상태 관리와 비동기 작업 처리를 효율적으로 할 수 있습니다.