Redux Thunk를 활용한 페이지 전환 기능 구현 방법

18 Oct 2023

redux

React 애플리케이션을 개발할 때, 페이지 전환 기능은 핵심적인 요소 중 하나입니다. Redux Thunk 미들웨어를 사용하면 비동기 액션을 만들고, 페이지 전환을 관리할 수 있습니다. 이번 블로그 포스트에서는 Redux Thunk를 활용하여 페이지 전환 기능을 구현하는 방법에 대해 알아보겠습니다.

Redux Thunk란 무엇인가요?

Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 액션을 처리할 수 있게 해줍니다. 일반적인 Redux 액션은 단순한 객체를 반환하지만, Redux Thunk를 사용하면 함수를 반환할 수 있습니다. 이 함수는 특정 액션이 디스패치되기 전에 비동기 작업을 수행할 수 있습니다.

페이지 전환 기능을 위한 Redux Thunk 설정

Redux Thunk 설치하기

Redux Thunk를 사용하기 위해 먼저 패키지를 설치해야 합니다. 프로젝트 폴더에서 아래 명령어를 실행하세요.
```
npm install redux-thunk
```
Redux에 Thunk 미들웨어 등록하기

Redux 스토어를 생성할 때, 미들웨어로 Redux Thunk를 추가해야 합니다. createStore 함수의 두번째 인자로 applyMiddleware를 사용하여 Redux Thunk를 등록합니다.
```
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

비동기 액션 생성 함수 만들기

페이지 전환을 위해서는 비동기 액션 생성 함수가 필요합니다. 이 함수는 페이지 전환을 시작하고, 비동기 작업을 수행한 후에 다른 액션을 디스패치하는 역할을 합니다.

import { push } from 'connected-react-router';

export const changePage = (page) => {
  return (dispatch) => {
    // 페이지 전환을 시작하기 전에 필요한 작업이 있다면 여기에 추가합니다.
  
    // 비동기 작업을 수행합니다.
  
    // 페이지 전환 이후에 dispatch할 액션을 작성합니다.
    dispatch(push(page));
  }
}

위 예시에서는 connected-react-router 패키지를 사용하여 페이지 전환을 처리하고 있습니다. 필요에 따라 다른 라우팅 라이브러리를 사용할 수도 있습니다.

페이지 전환 기능 사용하기

생성한 비동기 액션 생성 함수를 컴포넌트에서 사용할 수 있습니다. 예를 들어, 버튼을 클릭하면 특정 페이지로 전환하는 기능을 구현해보겠습니다.

import React from 'react';
import { connect } from 'react-redux';
import { changePage } from '../actions';

const Button = ({ changePage }) => {
  const handleClick = () => {
    changePage('/new-page');
  };

  return (
    <button onClick={handleClick}>페이지 전환</button>
  );
};

export default connect(null, { changePage })(Button);

위 예시에서는 Redux의 connect 함수를 사용하여 컴포넌트를 Redux에 연결하고, changePage 액션 생성 함수를 Button 컴포넌트의 props로 받아와서 사용하고 있습니다.

마무리

Redux Thunk를 활용하면 페이지 전환 기능을 손쉽게 구현할 수 있습니다. 비동기 액션 생성 함수를 사용하여 페이지 전환을 처리하고, 필요에 따라 추가적인 비동기 작업을 수행할 수 있습니다.

Redux Thunk를 사용하여 페이지 전환 기능을 구현한다면, 애플리케이션의 사용자 경험을 향상시킬 수 있을 것입니다.

더 자세한 내용은 Redux Thunk 공식 문서를 참고해보세요.

#redux #redux-thunk