[javascript] Vue.js의 상태 관리 방법

01 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 구축하기 위한 강력한 JavaScript 프레임워크입니다. 애플리케이션의 상태를 관리하는 것은 중요한 부분이며, Vue.js에서는 다양한 방법으로 상태 관리를 할 수 있습니다. 이번 블로그 포스트에서는 Vue.js에서의 상태 관리 방법을 알아보겠습니다.

Vuex를 사용한 상태 관리

Vuex는 Vue.js 애플리케이션의 상태 관리를 위한 공식 상태 관리 라이브러리입니다. Vuex를 사용하면 중앙 집중화된 상태 저장소를 만들 수 있으며, 애플리케이션에서 상태에 접근하고 변경할 수 있습니다.

상태(State)

상태는 애플리케이션에서 관리해야 하는 데이터를 의미합니다. Vuex에서는 상태를 중앙 집중화된 상태 저장소에 저장하고, 컴포넌트에서 해당 상태에 접근할 수 있습니다.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
    message: 'Hello, Vuex!'
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    changeMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    messageLength(state) {
      return state.message.length;
    }
  }
});

변이(Mutation)

변이는 상태를 변경하기 위한 함수입니다. 변이를 통해 상태를 변경할 수 있으며, 변이는 동기적으로 동작합니다.

// 컴포넌트에서의 사용 예시
// ...
methods: {
  incrementCount() {
    this.$store.commit('increment');
  },
  changeMessage(newMessage) {
    this.$store.commit('changeMessage', newMessage);
  }
}
// ...

액션(Action)

액션은 변이를 호출하고, 비동기적인 작업을 수행하기 위한 함수입니다. 액션은 비동기적으로 동작하며, 변이를 호출하여 상태를 변경할 수 있습니다.

// 컴포넌트에서의 사용 예시
// ...
methods: {
  incrementCountAsync() {
    this.$store.dispatch('incrementAsync');
  }
}
// ...

게터(Getter)

게터는 상태의 값을 가져오기 위한 함수입니다. 게터는 다른 상태나 게터의 값에 기반하여 계산된 값을 반환할 수 있습니다.

// 컴포넌트에서의 사용 예시
// ...
computed: {
  messageLength() {
    return this.$store.getters.messageLength;
  }
}
// ...

Vue Composition API를 사용한 상태 관리

Vue Composition API는 Vue.js 3에서 도입된 API로, Vue.js에서 더욱 유연한 상태 관리를 위해 사용할 수 있습니다. Composition API는 기능을 더 작은 조각으로 분리하고 재사용하기 쉽게 만들어줍니다.

// 컴포넌트에서의 사용 예시
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, Composition API!'
    });

    const incrementCount = () => {
      state.count++;
    };

    const messageLength = computed(() => {
      return state.message.length;
    });

    return {
      state,
      incrementCount,
      messageLength
    };
  }
}

결론

Vue.js에서는 Vuex와 Vue Composition API를 활용하여 상태 관리를 할 수 있습니다. Vuex는 중앙 집중화된 상태 저장소를 사용하여 상태를 관리하고 변이와 액션을 통해 상태 변경을 처리합니다. Vue Composition API는 더욱 유연한 상태 관리를 위해 도입된 API로, 기능을 더 작은 조각으로 분리하여 컴포넌트를 구성합니다.

더 많은 상태 관리 방법과 Vuex, Vue Composition API의 사용 방법에 대해서는 공식 Vue.js 문서를 참고해주세요.

Happy coding! 😊