[Vue.js] Vuex를 이용한 상태 관리

Vue.js 애플리케이션은 컴포넌트 기반 아키텍처를 사용하므로 컴포넌트 간에 데이터를 효율적으로 전달하고 관리하는 것이 중요합니다. Vuex는 Vue.js 애플리케이션의 상태 관리를 위한 공식 상태 관리 라이브러리로, 중앙 집중식 저장소를 제공하여 애플리케이션의 모든 컴포넌트에서 상태를 공유하고 동기화하는데 사용됩니다. 아래에서 Vuex를 이용한 상태 관리에 대해 자세히 알아보겠습니다.

---

상태 관리의 필요성

Vue.js 애플리케이션에서는 컴포넌트 간에 데이터를 전달하고 유지하기 위해 props와 이벤트를 사용할 수 있습니다. 하지만 애플리케이션이 커지면 컴포넌트 간의 데이터 흐름이 복잡해지고 관리가 어려워질 수 있습니다. 이런 경우 상태 관리 라이브러리인 Vuex를 사용하면 중앙 집중식 저장소를 통해 애플리케이션의 상태를 효율적으로 관리할 수 있습니다.

---

Vuex 기본 구조

Vuex의 기본 구조는 다음과 같습니다.

• State: 애플리케이션의 상태(데이터)를 저장하는 객체입니다. 컴포넌트들은 이 상태를 읽기만 하고 직접 수정하지 않습니다.
• Getters: 상태를 계산하는 메서드로, 컴포넌트에서 계산된 상태를 쉽게 가져올 수 있도록 도와줍니다.
• Mutations: 상태를 변경하는 메서드로, 동기적으로 상태를 수정합니다. (State를 변경하는 유일한 방법)
• Actions: 비동기 로직을 포함하는 메서드로, API 호출 등의 비동기 작업을 수행하고 Mutations를 호출하여 상태를 변경합니다.
• Modules: 애플리케이션의 크기가 커질 경우 모듈로 나눠서 Vuex를 구성할 수 있습니다. 각 모듈은 자체의 State, Getters, Mutations, Actions를 가질 수 있습니다.

---

Vuex의 주요 개념

3-1. 상태(State)

// store.js

const state = {
  count: 0,
};

애플리케이션의 상태를 담고 있는 State 객체를 정의합니다.

3-2. 게터(Getters)

// store.js

const getters = {
  doubleCount(state) {
    return state.count * 2;
  },
};

Getters는 상태를 계산하는 메서드로, 컴포넌트에서 이를 호출하여 계산된 상태를 가져올 수 있습니다.

3-3. 뮤테이션(Mutations)

// store.js

const mutations = {
  increment(state) {
    state.count++;
  },
};

Mutations는 동기적으로 상태를 변경하는 메서드로, 컴포넌트에서 이를 호출하여 상태를 수정할 수 있습니다. 하지만 직접 호출하는 것은 권장되지 않습니다. Actions를 통해 호출하는 것이 좋습니다.

3-4. 액션(Actions)

// store.js

const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  },
};

Actions는 비동기 로직을 포함하는 메서드로, 비동기 작업을 수행한 뒤 Mutations를 호출하여 상태를 변경합니다.

---

4. Vuex 사용하기

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
  count: 0,
};

const getters = {
  doubleCount(state) {
    return state.count * 2;
  },
};

const mutations = {
  increment(state) {
    state.count++;
  },
};

const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  },
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
});

Vuex Store를 정의하고, 컴포넌트에서 필요한 상태를 computed와 mapState, mapGetters, mapMutations, mapActions 등을 사용하여 가져오고, 상태를 변경하거나 비동기 작업을 수행할 수 있습니다.

<!-- MyComponent.vue -->

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync']),
  },
};
</script>

---

Vuex의 장점

• 중앙 집중식 상태 관리로 컴포넌트 간 데이터 흐름을 명확하게 할 수 있습니다.
• 데이터의 변화를 추적하고 디버깅하기 용이합니다.
• 비동기 작업을 포함한 복잡한 상태 관리를 간단하게 구현할 수 있습니다.

Vuex를 사용하여 Vue.js 애플리케이션의 상태 관리를 체계적으로 구성하면 유지보수와 개발 생산성을 향상시킬 수 있습니다.