Vuex란 무엇인가?

Vue

Vuex란 무엇인가?

Vuex란, 상태관리 패턴에 대한 라이브러리로써, 애플리케이션의 모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하며, 예측 가능한 방식으로 상태를 변경할 수 있다.


Vuex는 왜 사용하는가?

Vuex는 상태관리(State Management)를 위해 사용한다. 여기서 말하는 상태(State)란, 데이터를 말하며, 컴포넌트간에 데이터 통신 및 전달을 효율적으로 관리를 쉽게 하기 위해 Vuex를 사용한다.

Vuex는 중대형 규모의 앱 컴포넌트들을 관리할 때 좋은데, 일반적으로 앱의 규모가 커지면 다음과 같은 문제가 생긴다.

  • 단순 부모-자식간의 데이터 통신이 아닌, 그 중간에 많은 컴포넌트들이 있을 경우, 데이터 통신 방식이 복잡해짐
  • EventBus를 사용하여 상하위 관계가 아닌 컴포넌트들간의 통신시에 관리가 안됨

이런 문제를 해결하기 위해, Vuex를 사용하여 모든 데이터(State)를 한 곳에서 중앙 집중식으로 관리한다. 즉, Vuex는 공통의 상태를 공유하는 여러 컴포넌트가 있을 경우, 이를 Vuex 한 곳(전역)에서 집중적으로 관리하는 역할을 한다. 그러나, 만약 공통으로 공유하는 것이 아닌, 개별의 로컬 컴포넌트에서 사용하는 경우에는, 꼭 Vuex에 저장할 필요가 없다.


Vuex Architecture

위에서, Vuex는 상태관리 패턴에 대한 라이브러리라고 했다. 즉, 상태관리 패턴이란, 상태를 관리하기 위한 하나의 패턴방식을 말한다. Vuex에서의 패턴방식은 단반향 데이터 흐름을 따른다.

Vuex One-Way Data Flow
출처: Vuex One-Way Data Flow

상태관리는 3가지로 구성되어 있다.

  • state: 컴포넌트간에 공유하는 data
  • view: data가 보여지는 template
  • actions: 사용자의 입력에 따라 반응하는 methods
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new Vue({

  // state
  data () {
    return {
      msg: 'hello world'
    }
  },

  // view
  template: `
    <div>{{ msg }}</div>
  `,

  // actions
  methods: {
    changeMsg () {
      this.msg = 'world hello'
    }
  }
})


Vuex Architecture

전체적인 Vuex Architecture는 다음과 같다.

Vuex Architecture
출처: Vuex Architecture


Vuex 설치 및 등록

  1. npm을 이용해서 설치한다.

    1
    npm install vuex

  2. Vuex를 등록할 js 파일을 새로 생성하는데, 보통 관례로 store.js로 만든다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // store.js
    import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex);

    export default new Vuex.Store({
      //
    });

  3. Vuex를 전역에서 사용하기 위해, main.js에 등록한다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // main.js
    import Vue from 'vue'
    import App from './App.vue'
    // store를 import
    import store from './store'

    Vue.config.productionTip = false

    new Vue({
      // store를 루트(전역) 인스턴스에 등록
      store,
      render: h => h(App),
    }).$mount('#app')

루트 인스턴스에 store 옵션을 제공함으로써 저장소는 루트의 모든 하위 컴포넌트에 주입되고, 하위 컴포넌트에서 this.$store로 사용할 수 있다. (루트 인스턴스: main.js에 있는 최상단의 인스턴스)