Redux Toolkit을 이용한 자바스크립트 앱의 라우팅 구현 방법

21 Sep 2023

redux

Redux Toolkit은 자바스크립트 앱의 상태 관리를 쉽게 해주는 도구입니다. 이 도구를 사용하여 라우팅을 구현하는 방법에 대해 알아보겠습니다. 라우팅은 웹 앱의 다른 페이지 간의 이동을 관리하는 것을 의미합니다.

1. React Router 설치

첫 번째 단계는 React Router를 설치하는 것입니다. React Router는 라우팅을 쉽게 구현할 수 있는 라이브러리입니다. 다음 명령어를 사용하여 React Router를 설치합니다.

npm install react-router-dom

2. 라우팅 컴포넌트 작성

두 번째 단계는 라우팅을 담당할 컴포넌트를 작성하는 것입니다. 이 컴포넌트에서는 라우팅 경로와 해당 경로에 맞는 컴포넌트를 매핑합니다.

// App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

3. Redux Store에 라우팅 상태 추가

Redux Toolkit을 사용하여 상태 관리를 할 경우, 라우팅 상태를 Redux Store에 추가하는 것이 좋습니다. 이렇게 하면 여러 컴포넌트에서 해당 상태에 접근하여 사용할 수 있습니다.

// store.js

import { configureStore, createSlice } from "@reduxjs/toolkit";

const routingSlice = createSlice({
  name: "routing",
  initialState: {
    currentPage: "",
  },
  reducers: {
    setCurrentPage: (state, action) => {
      state.currentPage = action.payload;
    },
  },
});

export const { setCurrentPage } = routingSlice.actions;

const store = configureStore({
  reducer: {
    routing: routingSlice.reducer,
  },
});

export default store;

4. 라우팅 상태 업데이트

마지막으로, 라우터 컴포넌트에서 현재 페이지를 라우팅 상태에 업데이트해야 합니다. 이를 위해 useDispatch 훅을 사용하여 setCurrentPage 액션을 디스패치합니다.

// Home.js

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { setCurrentPage } from "../store";

function Home() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setCurrentPage("home"));
  }, [dispatch]);

  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
}

export default Home;

위의 예제에서는 Home 컴포넌트에서 setCurrentPage 액션을 호출하여 “home”을 현재 페이지로 설정했습니다. About 컴포넌트에서도 동일한 방식으로 라우팅 상태를 업데이트할 수 있습니다.

이제 Redux Toolkit을 이용하여 자바스크립트 앱의 라우팅을 구현할 수 있게 되었습니다. Redux Toolkit은 상태 관리를 편리하게 해주기 때문에 앱의 확장성과 유지 보수성을 향상시킬 수 있습니다.

#javascript #redux #redux toolkit #라우팅 #React Router