자바스크립트 Redux Toolkit을 활용한 온라인 스토어 구축 방법

21 Sep 2023

redux

Redux Toolkit

Redux Toolkit은 자바스크립트 애플리케이션에서 Redux를 사용하기 쉽게 만들어주는 오픈 소스 라이브러리입니다. 이 라이브러리는 Redux의 작업량을 줄여 개발 생산성을 높일 수 있으며, Redux의 핵심 기능들을 추상화하여 사용하기 쉽게 만들어 줍니다.

이 글에서는 Redux Toolkit을 활용하여 온라인 스토어를 구축하는 방법을 알아보겠습니다.

1. Redux Toolkit 설치하기

먼저, 프로젝트에 Redux Toolkit을 설치해야 합니다. 터미널에서 아래의 명령어를 실행하여 Redux Toolkit을 설치합니다.

npm install @reduxjs/toolkit

2. Redux Store 만들기

Redux Toolkit은 간소화된 구조를 제공하기 때문에 Redux Store를 만들기가 매우 간단합니다. 먼저, configureStore 함수를 사용하여 생성할 스토어를 설정합니다.

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer
});

export default store;

위의 코드에서 configureStore 함수에는 reducer라는 속성이 필요합니다. rootReducer는 애플리케이션의 모든 리듀서를 조합한 것입니다.

3. Slice 만들기

Slice는 Redux Toolkit에서 액션과 리듀서를 함께 정의하는 방법입니다. Slice를 이용하면 Redux 액션 및 리듀서의 코드를 간단하게 작성할 수 있습니다.

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  cart: []
};

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart: (state, action) => {
      state.cart.push(action.payload);
    },
    removeFromCart: (state, action) => {
      state.cart = state.cart.filter(item => item.id !== action.payload);
    }
  }
});

export const { addToCart, removeFromCart } = cartSlice.actions;

export default cartSlice.reducer;

위의 코드에서 createSlice 함수를 사용하면 addToCart와 removeFromCart와 같은 액션 타입과 리듀서 함수를 생성할 수 있습니다. 초기 상태는 initialState로 정의하고, 각 액션에 대한 리듀서 로직을 작성합니다.

4. 컴포넌트에서 Redux 사용하기

Redux Toolkit은 useDispatch와 useSelector라는 React 훅을 제공하여 컴포넌트에서 리덕스 상태와 액션을 사용할 수 있도록 합니다.

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addToCart, removeFromCart } from '../reducers/cartSlice';

const Cart = () => {
  const cart = useSelector(state => state.cart);
  const dispatch = useDispatch();

  const handleAddToCart = (product) => {
    dispatch(addToCart(product));
  };

  const handleRemoveFromCart = (productId) => {
    dispatch(removeFromCart(productId));
  };

  return (
    <div>
      <h2>Cart Items</h2>
      {cart.map(item => (
        <div key={item.id}>
          <p>{item.name} - {item.price}</p>
          <button onClick={() => handleRemoveFromCart(item.id)}>Remove</button>
        </div>
      ))}
    </div>
  );
};

export default Cart;

위의 예시에서는 useDispatch 훅을 사용하여 addToCart와 removeFromCart 액션을 디스패치합니다. useSelector 훅을 사용하여 cart 상태를 가져와서 컴포넌트에서 사용하고 있습니다.

마무리

이제 Redux Toolkit을 활용하여 간편하게 온라인 스토어를 구축하는 방법을 알아보았습니다. Redux Toolkit은 Redux의 작업량을 줄여주고 생산성을 높여주는 강력한 도구입니다. 자세한 내용은 Redux Toolkit의 공식 문서를 참조하세요.

#Javascript #ReduxToolkit