[javascript] Vue Router와 Vuex 상태 관리

18 Dec 2023

javascript

Vue.js는 프론트엔드 웹 애플리케이션을 개발하는 데 사용되는 유연하고 강력한 프레임워크입니다. Vue Router와 Vuex는 Vue.js 애플리케이션을 개발하는 데 필수적인 도구입니다.

Vue Router

Vue Router는 Vue.js 애플리케이션의 네비게이션을 관리하는 데 사용됩니다. URL을 기반으로 애플리케이션의 다른 뷰 간에 전환할 수 있게 해줍니다. Vue Router를 사용하면 라우트, 동적 라우팅, 중첩 라우트와 같은 기능들을 쉽게 구현할 수 있습니다.

// 예시 코드
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = new VueRouter({
  routes,
});

export default router;

Vuex

Vuex는 Vue.js 애플리케이션의 상태 관리 패턴 및 라이브러리입니다. 컴포넌트 간의 데이터 전달 및 공유를 효율적으로 관리할 수 있게 해줍니다. 상태, 뮤테이션, 액션, 게터 등의 개념을 사용하여 애플리케이션의 상태를 예측 가능한 방식으로 변경 및 조작할 수 있습니다.

// 예시 코드
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

Vue Router와 Vuex의 통합

Vue Router와 Vuex를 통합하여 사용하면, 라우팅된 뷰 간에 데이터를 효율적으로 공유하고 관리할 수 있습니다. 이를 통해 복잡한 애플리케이션에서 데이터의 일관성을 유지하고 관리할 수 있습니다.

// 예시 코드
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import store from './store';
import router from './router';
import App from './App.vue';

Vue.use(Vuex);
Vue.use(VueRouter);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

Vue Router와 Vuex를 함께 사용하여 Vue.js 애플리케이션의 상태와 네비게이션을 효과적으로 관리할 수 있습니다. 이를 통해 개발자는 강력한 상태 관리와 라우팅 기능을 제공하는 모던한 웹 애플리케이션을 개발할 수 있습니다.

참고 자료: