Redux Thunk를 이용한 다중 페이지 폼 구현하기

18 Oct 2023

redux

소개

다중 페이지 폼은 사용자로부터 여러 단계로 나뉘어진 정보를 수집하는 과정입니다. 이러한 폼을 구현하기 위해 Redux Thunk를 활용할 수 있습니다. Redux Thunk는 Redux middleware로, 비동기 동작을 처리하기 위한 표준적인 방법입니다.

이번 블로그에서는 Redux Thunk를 사용하여 다중 페이지 폼을 구현하는 방법에 대해 알아보겠습니다.

시작하기 전에

Redux와 Redux Thunk를 프로젝트에 설치해주세요:
```
npm install redux redux-thunk
```
Redux store를 설정해주세요. 예시 코드는 다음과 같습니다: ```javascript import { createStore, applyMiddleware } from ‘redux’; import thunk from ‘redux-thunk’; import rootReducer from ‘./reducers’;

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

export default store;

## 구현 과정

1. 액션 타입과 액션 생성자 함수를 정의합니다. 각 페이지에 해당하는 액션 타입을 정의하고, 상태를 변경하기 위한 액션 생성자 함수를 만듭니다.

```javascript
// actionTypes.js
export const SET_PAGE_1_DATA = 'SET_PAGE_1_DATA';
export const SET_PAGE_2_DATA = 'SET_PAGE_2_DATA';

// actions.js
export const setPage1Data = (data) => ({
  type: SET_PAGE_1_DATA,
  payload: data,
});

export const setPage2Data = (data) => ({
  type: SET_PAGE_2_DATA,
  payload: data,
});

리듀서를 작성합니다. 각 페이지에 해당하는 상태를 관리하는 리듀서를 만듭니다.

// reducers.js
import { combineReducers } from 'redux';
import { SET_PAGE_1_DATA, SET_PAGE_2_DATA } from './actionTypes';

const page1DataReducer = (state = {}, action) => {
  switch (action.type) {
    case SET_PAGE_1_DATA:
      return {
        ...state,
        ...action.payload,
      };
    default:
      return state;
  }
};

const page2DataReducer = (state = {}, action) => {
  switch (action.type) {
    case SET_PAGE_2_DATA:
      return {
        ...state,
        ...action.payload,
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  page1Data: page1DataReducer,
  page2Data: page2DataReducer,
});

export default rootReducer;

폼 컴포넌트를 작성합니다. 각 페이지에 대한 템플릿과 폼 데이터를 관리하는 컴포넌트를 만듭니다.

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setPage1Data, setPage2Data } from './actions';

const FormPage1 = () => {
  const dispatch = useDispatch();
  const page1Data = useSelector((state) => state.page1Data);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 폼 데이터 유효성 검사 등의 로직 수행
    dispatch(setPage1Data({
      // 페이지 1에서 수집한 데이터
    }));
    // 다음 페이지로 이동
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 페이지 1 템플릿 */}
    </form>
  );
};

const FormPage2 = () => {
  const dispatch = useDispatch();
  const page2Data = useSelector((state) => state.page2Data);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 폼 데이터 유효성 검사 등의 로직 수행
    dispatch(setPage2Data({
      // 페이지 2에서 수집한 데이터
    }));
    // 다음 페이지로 이동
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 페이지 2 템플릿 */}
    </form>
  );
};

폼 컴포넌트를 사용하는 메인 컴포넌트를 작성합니다. 각 페이지에 대한 라우트를 설정하고, 페이지 간 이동을 관리합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import FormPage1 from './FormPage1';
import FormPage2 from './FormPage2';

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">페이지 1</Link>
          </li>
          <li>
            <Link to="/page2">페이지 2</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={FormPage1} />
      <Route path="/page2" component={FormPage2} />
    </Router>
  );
};

export default App;

결론

Redux Thunk를 활용하여 다중 페이지 폼을 구현하는 방법을 알아보았습니다. Redux를 사용하면 상태 관리와 비동기 동작 처리를 용이하게 할 수 있습니다. Redux Thunk를 이용하면 비동기 동작을 처리하는 데 수월하게 할 수 있으며, 다중 페이지 폼을 구현하는 데에도 도움이 됩니다.

더 많은 Redux Thunk 기능과 사용법을 알고 싶다면 공식 문서를 참고해주세요.

#redux #redux-thunk