[JavaScript 프레임워크] 5일차: JavaScript 상태 관리 이해하기: Redux와 Vuex

5. 상태 관리 (Redux, Vuex 등)

프로젝트 개요

이번 글에서는 JavaScript 애플리케이션에서 상태 관리를 위해 널리 사용되는 Redux와 Vuex에 대해 알아보겠습니다. 상태 관리는 애플리케이션의 상태를 중앙 집중식으로 관리하여 복잡한 상태 변화를 쉽게 추적하고 관리할 수 있게 해줍니다.

---

Redux

Redux란 무엇인가?

Redux는 애플리케이션의 상태를 예측 가능하게 관리하기 위한 JavaScript 라이브러리입니다. 주로 React와 함께 사용되지만, 다른 프레임워크와도 통합할 수 있습니다. Redux는 단일 스토어를 통해 상태를 관리하고, 액션과 리듀서를 통해 상태를 변경합니다.

 

Redux 설치 및 기본 설정

1. Redux 및 React-Redux 설치

npm install redux react-redux

 

2. 기본 스토어 설정

store.js

import { createStore } from 'redux';

// 초기 상태
const initialState = {
  count: 0
};

// 리듀서
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// 스토어 생성
const store = createStore(counterReducer);

export default store;

 

3. React 컴포넌트에서 Redux 사용

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function App() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default App;

Vuex

Vuex란 무엇인가?

Vuex는 Vue.js 애플리케이션의 상태 관리를 위한 라이브러리입니다. Vuex는 상태를 중앙 집중식으로 관리하며, 상태를 예측 가능하게 변경할 수 있도록 도와줍니다. Vuex는 Vue 컴포넌트의 반응성 시스템과 통합되어 있습니다.

Vuex 설치 및 기본 설정

1. Vuex 설치

npm install vuex@next

2. 기본 스토어 설정

store/index.js

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  }
});

export default store;

3. Vue 컴포넌트에서 Vuex 사용

main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

App.vue

<template>
  <div id="app">
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
}
</script>

<style>
/* 스타일 추가 */
</style>

 

 

---

결론

Redux와 Vuex는 JavaScript 애플리케이션에서 상태 관리를 효율적으로 하기 위한 강력한 도구입니다. Redux는 주로 React와 함께 사용되며, Vuex는 Vue.js 애플리케이션에서 사용됩니다. 이번 글을 통해 Redux와 Vuex의 기본 개념과 설정 방법을 배웠습니다.

 

다음 글에서는 라우팅 설정에 대해 알아보겠습니다. 다음 글에서 만나요!