Redux Toolkit을 활용한 자바스크립트 웹 컴포넌트 개발 방법

21 Sep 2023

redux

Redux Toolkit은 Redux의 개발 생산성을 향상시키기 위해 고안된 라이브러리입니다. 이 라이브러리는 Redux의 기본 기능을 간소화하고, 자동화된 작업을 제공하여 Redux 코드의 개발과 유지 보수를 더욱 용이하게 만들어줍니다.

이 글에서는 Redux Toolkit을 활용하여 자바스크립트 웹 컴포넌트를 개발하는 방법에 대해 알아보겠습니다.

단계 1: Redux Toolkit 설치 및 설정

먼저, 프로젝트에 Redux Toolkit을 설치해야 합니다. 다음 명령을 사용하여 Redux Toolkit을 설치할 수 있습니다.

npm install @reduxjs/toolkit

설치가 완료되면, Redux Toolkit을 사용하기 위해 configureStore 함수를 통해 Redux Store를 설정합니다.

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

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

configureStore 함수는 Redux DevTools와 함께 Redux Store를 설정해줍니다.

단계 2: Redux Toolkit을 활용한 웹 컴포넌트 개발

이제 Redux Toolkit을 활용하여 웹 컴포넌트를 개발해보겠습니다.

// 컴포넌트의 Redux 상태와 상태 변경 로직을 정의합니다.
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

위 코드는 Redux Toolkit의 createSlice 함수를 사용하여 웹 컴포넌트의 Redux 상태와 상태 변경 로직을 정의하는 예시입니다. createSlice 함수는 상태와 상태 변경 로직을 하나의 객체로 정의할 수 있도록 해줍니다.

// 컴포넌트의 UI 렌더링 및 Redux 상태와 연결하는 예시입니다.
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

const CounterComponent = () => {
  const counterValue = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter</h1>
      <p>{counterValue}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
};

export default CounterComponent;

위 코드는 웹 컴포넌트의 UI를 렌더링하고 Redux 상태와 연결하는 예시입니다. useSelector 훅을 사용하여 Redux 상태 값에 접근하고, useDispatch 훅을 사용하여 Redux 액션을 디스패치합니다.

마무리

이처럼 Redux Toolkit을 활용하면 Redux의 개발 생산성을 개선하고, 자바스크립트 웹 컴포넌트의 개발을 효율적으로 진행할 수 있습니다. Redux Toolkit은 간편한 설정과 강력한 기능을 제공하여 개발자들에게 큰 도움이 될 것입니다.

#JavaScript #Redux #ReduxToolkit