Vue.js에서 사용하는 상태 관리 라이브러리 Vuex에 대한 소개

deviantce master

•

Vuex란 무엇인가?


Vue.js 애플리케이션의 상태 관리를 위한 상태 관리 패턴과 라이브러리입니다. Vuex는 Vue.js 생태계에서 추천하는 공식 상태 관리 라이브러리로써, 애플리케이션의 모든 컴포넌트 간의 상태를 중앙 집중식으로 관리하고 변경 사항을 추적할 수 있게 해줍니다. 

Vuex는 주로 복잡한 상태 관리를 위해 사용되며, 컴포넌트 간의 데이터 전달과 상태 업데이트를 보다 효율적으로 처리할 수 있도록 도와줍니다. Vuex를 사용하면 상태, 변이, 액션, 게터 등의 개념을 활용하여 데이터의 흐름을 명확하게 관리할 수 있습니다.

Vuex의 주요 개념과 기능

1. 상태 (State)


Vuex의 상태는 애플리케이션의 전역 데이터를 정의합니다. 각각의 Vue 컴포넌트에서 해당 데이터를 사용할 수 있으며, 여러 컴포넌트 간의 데이터 공유가 용이합니다. 상태는 Vuex의 중앙 저장소에 저장되며, 컴포넌트에서는 상태를 직접 변경할 수 없고, 변이(Mutations) 또는 액션(Actions)을 통해 변경할 수 있습니다.

예시:
상태 값(count)을 정의하고, 컴포넌트에서 사용하는 예시입니다.

// 상태 정의
const state = {
  count: 0
}

// 컴포넌트에서 사용
this.$store.state.count

2. 변이 (Mutations)


변이는 상태의 값을 변경하는 메서드입니다. 변이는 동기적인 방식으로 상태를 업데이트 하며, 기본적으로 상태 변경을 위해 사용되는 중앙 집중식 이벤트 버스 역할을 합니다.

예시:
count 상태를 증가시키는 예시입니다.

// 변이 정의
const mutations = {
  increment(state) {
    state.count++
  }
}

// 변이 호출
this.$store.commit('increment')

3. 액션 (Actions)


액션은 변이를 호출하는 메서드입니다. 액션은 비동기 처리를 포함한 복잡한 연산, API 호출 등을 수행할 때 사용됩니다. 액션은 변이를 호출하거나 다른 액션을 호출할 수 있으며, 비동기 처리가 완료된 후에 변이를 호출하여 상태를 업데이트합니다.

예시:
count 상태를 비동기적으로 증가시키는 예시입니다.

// 액션 정의
const actions = {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}

// 액션 호출
this.$store.dispatch('incrementAsync')

Vuex의 상태(State) 관리

Vuex의 상태(State)는 애플리케이션의 전역 데이터를 중앙 집중식으로 관리하는 기능을 제공합니다. 상태는 Vue 컴포넌트에서 사용될 수 있으며, 변이(Mutations) 또는 액션(Actions)을 통해 변경할 수 있습니다.

상태 정의


const state = {
  count: 0,
  message: "Hello Vuex"
}

위의 예시에서는 count와 message라는 두 가지 상태를 정의하였습니다. count는 숫자를 저장하는 상태이고, message는 문자열을 저장하는 상태입니다.

상태 사용


// 컴포넌트에서 상태 사용
this.$store.state.count

// 컴포넌트에서 상태 변경
this.$store.state.count = 10

위의 예시에서는 컴포넌트에서 상태(count)를 사용하고, 직접 변경하는 방법을 보여줍니다. 하지만 Vuex에서는 상태를 직접 변경하는 것이 권장되지 않으며, 변이(Mutations) 또는 액션(Actions)을 통해 상태를 변경해야합니다.

Getter를 통한 상태 접근


// Getter 정의
const getters = {
  getCount: state => {
    return state.count
  }
}

// 컴포넌트에서 Getter 사용
this.$store.getters.getCount

Getter는 상태를 가져오는 계산된 속성(Computed Property)입니다. Getter를 사용하면 상태에 대한 추가적인 로직을 처리하거나 계산된 값을 제공할 수 있습니다.

Vuex의 변이(Mutations)와 액션(Actions)

변이(Mutations)

변이는 상태를 변경하는 메서드로, 동기적인 방식으로 상태를 업데이트합니다. 변이를 사용하여 상태를 변경하는 이유는 다음과 같습니다.
– 직접적인 상태 변경을 제한하고, 중앙 집중식 방식으로 상태를 관리하기 위해
– 개발자 도구를 사용하여 상태 변화를 추적하고 디버깅하기 위해
– 변이는 순수 함수로 작성되어 예측 가능하고 테스트 가능한 코드를 작성할 수 있도록 도와줍니다.

변이 정의


const mutations = {
  increment(state) {
    state.count++
  },
  updateMessage(state, newMessage) {
    state.message = newMessage
  }
}

위의 예시에서는 increment라는 변이를 정의하여 count 상태를 1씩 증가시킵니다. 또한, updateMessage라는 변이를 정의하여 message 상태를 새로운 메시지로 업데이트합니다.

변이 호출


this.$store.commit('increment')
this.$store.commit('updateMessage', 'New Message')

위의 예시에서는 변이를 호출하여 상태를 변경합니다. 변이는 commit 메서드를 사용하여 호출하며, 첫 번째 인자는 호출할 변이의 이름입니다. 추가적인 인자가 필요한 경우에는 두 번째 인자부터 전달할 수 있습니다.

액션(Actions)

액션은 변이를 호출하는 메서드로, 일반적으로 비동기 작업을 수행할 때 사용됩니다. 액션은 비동기 작업을 수행한 후에 변이를 호출하여 상태를 변경합니다.

액션 정의


const actions = {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  },
  updateMessageAsync({ commit }, newMessage) {
    setTimeout(() => {
      commit('updateMessage', newMessage)
    }, 2000)
  }
}

위의 예시에서는 incrementAsync 액션을 정의하여 1초 후에 increment 변이를 호출하고, updateMessageAsync 액션을 정의하여 2초 후에 updateMessage 변이를 호출합니다. 두 액션은 setTimeout을 사용하여 비동기 처리를 시뮬레이션합니다.

액션 호출


this.$store.dispatch('incrementAsync')
this.$store.dispatch('updateMessageAsync', 'New Message')

위의 예시에서는 액션을 호출하여 상태를 변경합니다. 액션은 dispatch 메서드를 사용하여 호출하며, 첫 번째 인자는 호출할 액션의 이름입니다. 추가적인 인자가 필요한 경우에는 두 번째 인자부터 전달할 수 있습니다.

Vuex 모듈화

Vuex 모듈화는 애플리케이션의 상태 관리를 더 효율적이고 구조화된 방식으로 관리하기 위해 사용됩니다. 각 모듈은 상태, 변이, 액션, getter를 포함할 수 있으며, 중복된 코드를 방지하고 코드의 유지보수성을 높일 수 있습니다.

모듈 정의


const myModule = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => {
      return state.count
    }
  }
}

위의 예시에서는 myModule이라는 모듈을 정의하고, 상태(state), 변이(mutations), 액션(actions), getter를 포함하고 있습니다. 각각의 내용은 여러 개의 모듈로 나눌 수 있으며, 필요한 기능에 따라 구성할 수 있습니다.

모듈 등록


const store = new Vuex.Store({
  modules: {
    myModule
  }
})

위의 예시에서는 myModule을 Vuex의 store에 등록하고 있습니다. 등록된 모듈은 전역적으로 접근 가능하며, 다른 모듈이나 컴포넌트에서 참조하여 사용할 수 있습니다.

모듈 사용


this.$store.state.myModule.count
this.$store.commit('myModule/increment')
this.$store.dispatch('myModule/incrementAsync')
this.$store.getters['myModule/getCount']

위의 예시에서는 등록된 모듈을 사용하는 방법을 보여줍니다. 모듈명을 접두사로 붙여서 상태(state), 변이(commit), 액션(dispatch), getter에 접근할 수 있습니다.

Vuex의 게터(Getters)와 셋터(Setter)

게터(Getters)

게터는 Vuex의 상태를 계산된 속성(computed property)으로 사용할 수 있도록 해줍니다. 게터는 기존의 상태를 가공, 조작하여 필요한 데이터를 반환하거나 계산할 때 사용됩니다.

게터 정의


const getters = {
  doubleCount: state => {
    return state.count * 2
  },
  getMessage: state => {
    return `The count is ${state.count}`
  }
}

위의 예시에서는 doubleCount라는 게터를 정의하여 state의 count 값을 2배로 계산하여 반환합니다. 또한, getMessage라는 게터를 정의하여 state의 count 값을 포함한 메시지를 반환합니다.

게터 호출


this.$store.getters.doubleCount
this.$store.getters.getMessage

위의 예시에서는 게터를 호출하여 계산된 값을 가져옵니다. 게터는 computed 속성처럼 사용되며, 호출하는 방법은 `$store.getters.게터이름` 형태로 사용합니다.

셋터(Setter)

셋터는 Vuex의 상태를 직접 변경할 수 있도록 해줍니다. 일반적으로 변이(mutations)를 사용하여 상태를 변경해야 하지만, 어떤 특정한 작업이 필요한 경우에만 사용되어야 합니다.

셋터 정의


const mutations = {
  setCount(state, newValue) {
    state.count = newValue
  }
}

위의 예시에서는 setCount라는 셋터를 정의하여 state의 count 값을 새로운 값으로 설정합니다. 셋터는 변이와 달리 상태를 변경하는 역할을 하지만, 일반적으로 변이(mutations)를 사용하는 것이 권장됩니다.

셋터 호출


this.$store.commit('setCount', 10)

위의 예시에서는 셋터를 호출하여 상태를 직접 변경합니다. 셋터는 commit 메서드를 사용하여 호출하며, 첫 번째 인자는 호출할 셋터의 이름이고, 두 번째 인자부터 변경할 값을 전달합니다.

Vuex에서 비동기 처리하기

Vuex에서 비동기 처리는 액션(actions)을 이용하여 수행됩니다. 액션은 상태를 변경하지 않고 비동기 작업을 수행하고, 비동기 작업이 완료되면 변이(mutations)를 통해 상태를 변경합니다.

액션 정의


const actions = {
  fetchData({ commit }) {
    // 비동기 작업 수행
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 변이 호출하여 상태 변경
        commit('setData', data)
      })
  }
}

위의 예시에서는 fetchData라는 액션을 정의하고 있습니다. 액션은 첫 번째 파라미터로 context를 받아서 사용하며, 비동기 작업을 수행한 뒤에 변이(commit)를 호출하여 상태를 변경합니다.

액션 호출


this.$store.dispatch('fetchData')

위의 예시에서는 액션을 호출하여 비동기 작업을 수행합니다. `this.$store.dispatch(‘액션 이름’)` 형태로 액션을 호출하고, 필요한 인자를 전달할 수 있습니다.

변이 정의


const mutations = {
  setData(state, data) {
    state.data = data
  }
}

비동기 작업이 완료되면 변이(mutations)를 호출하여 받아온 데이터를 상태에 저장합니다.

비동기 작업 상태 관리

Vuex에서 비동기 작업의 상태를 관리하기 위해 일반적으로 ‘로딩’, ‘에러’ 상태를 추가로 관리합니다.


const state = {
  data: [],
  isLoading: false,
  error: null
}

const mutations = {
  setData(state, data) {
    state.data = data
  },
  setLoading(state, value) {
    state.isLoading = value
  },
  setError(state, error) {
    state.error = error
  }
}

const actions = {
  fetchData({ commit }) {
    commit('setLoading', true)

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        commit('setData', data)
        commit('setLoading', false)
      })
      .catch(error => {
        commit('setError', error)
        commit('setLoading', false)
      })
  }
}

위의 예시에서는 isLoading과 error라는 추가적인 상태를 관리하고, 액션에서 비동기 작업을 처리할 때 로딩 상태와 에러 상태를 변경합니다.

Vuex의 엄격 모드(Strict Mode)

엄격 모드(Strict Mode)는 Vuex의 디버그 모드로, 상태 변이(mutations)를 직접적으로 추적하여 변이(mutations)가 동기적으로 이루어지지 않았을 때 경고 메시지를 출력합니다. 이를 통해 앱의 상태 변화를 명확하게 추적하고 디버깅할 수 있습니다.

엄격 모드 활성화


const store = new Vuex.Store({
  strict: true,
  // ...
})

Vuex 스토어를 생성할 때 strict 옵션을 true로 설정하여 엄격 모드를 활성화합니다.

엄격 모드의 작동 방식

– 상태 변이(mutations)가 동기적으로 이루어지지 않았을 때 경고 메시지를 출력합니다.
– 상태 변이(mutations)를 외부에서 직접 호출하거나 변이(mutations) 내부에서 `this.$store` 대신에 다른 객체를 사용하면 경고 메시지를 출력합니다.
– 상태 변이(mutations) 이외의 방식으로 상태를 변경하려고 할 때 경고 메시지를 출력합니다.

엄격 모드 예시


const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  strict: true
})

store.commit('increment') // 상태 변이(mutations) 호출
store.count = 10 // 엄격 모드에서 에러

위의 예시에서는 엄격 모드를 활성화한 상태에서 상태 변이(mutations)를 직접 호출하고, 상태를 직접 변경하려고 할 때 에러가 발생합니다. 이를 통해 상태 변이(mutations)가 엄격하게 관리되고, 의도치 않은 상태 변경을 방지할 수 있습니다.

Vue.js와 Vuex의 차이점

Vue.js는 JavaScript 라이브러리로 사용자 인터페이스를 구축하기 위해 사용되고, Vuex는 Vue.js 애플리케이션의 상태 관리 패턴 및 라이브러리입니다. 따라서 Vue.js와 Vuex는 목적과 역할에서 차이가 있습니다.

Vue.js

– 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.
– MVVM(Model-View-ViewModel) 패턴에 기반하여 데이터와 뷰를 바인딩하고, 컴포넌트 기반 아키텍처를 제공합니다.
– 단일 파일 컴포넌트(Single-File Components)를 사용하여 HTML, CSS, JavaScript를 한 파일에서 관리할 수 있습니다.
– 가볍고 유연한 구조를 가지며, 초보자 및 중급 사용자에게 적합합니다.

Vuex

– Vue.js 애플리케이션의 상태 관리를 위한 패턴 및 라이브러리입니다.
– 중대형 규모의 애플리케이션에서 상태를 중앙 집중적으로 관리하는 방법을 제공합니다.
– 상태(state), 변이(mutations), 액션(actions), 게터(getters)의 개념과 라이프사이클을 가지는 아키텍처를 제공합니다.
– 애플리케이션의 복잡성을 관리하고, 상태와 데이터 공유, 비동기 작업 및 확장성을 향상시키는데 도움을 줍니다.

Vue.js와 Vuex 예시

Vue.js 애플리케이션에서는 컴포넌트 간 데이터 교류 및 통신을 위해 props와 이벤트를 사용합니다.

Vuex를 사용하면 상태 관리를 쉽게 할 수 있고, 컴포넌트 간의 데이터 공유를 간단하게 처리할 수 있습니다.


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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    parentMessage: ''
  },
  mutations: {
    updateParentMessage(state, message) {
      state.parentMessage = message
    }
  },
  actions: {
    updateParentMessage({ commit }) {
      commit('updateParentMessage', 'Updated Message from Parent')
    }
  }
})

// ParentComponent.vue

위의 예시에서는 Vue.js 애플리케이션에서 상태(state)를 관리하기 위해 Vuex를 사용한 예시입니다. Vuex를 사용하면 컴포넌트 간의 데이터 공유와 관리가 훨씬 용이해집니다.

Vuex의 장점

– 중앙 집중적인 상태 관리: Vuex는 애플리케이션의 상태를 중앙 집중적으로 관리함으로써 데이터의 일관성을 유지하고 관리하기 쉽게 합니다.
– 예측 가능한 상태 변이(mutations): 상태 변이(mutations)를 통해 상태를 변경하므로써 어떤 변화가 일어났는지 예측 가능한 UI를 구성할 수 있습니다.
– 애플리케이션의 복잡성 관리: 애플리케이션의 복잡성이 증가할 때 Vuex를 사용하면 상태, 변이, 액션 등을 통해 애플리케이션의 구조를 잘 조직화하고 관리할 수 있습니다.
– 모듈화: Vuex는 애플리케이션의 규모가 커질 때 모듈화를 통해 코드를 분리하고 재사용성을 높일 수 있습니다.

Vuex의 사용 사례

상태 공유

여러 컴포넌트 간에 공유해야하는 상태를 효율적으로 관리할 수 있습니다. 예를 들어, 로그인 상태, 장바구니 등 여러 컴포넌트에서 공유해야하는 데이터를 Vuex의 상태(state)로 관리하여 쉽게 업데이트하고 사용할 수 있습니다.

비동기 작업 관리

비동기 작업을 처리할 때 Vuex의 액션(actions)을 활용할 수 있습니다. 예를 들어, 서버에서 데이터를 가져와야하는 경우 액션(actions)을 사용하여 비동기 작업을 실행하고, 상태(state)를 업데이트하여 애플리케이션의 다른 부분에서 해당 데이터를 사용할 수 있습니다.

중앙 집중적인 상태 관리

애플리케이션의 복잡성이 증가할 때 상태(state)의 일관성을 유지하고, 복잡한 상태 변화를 예측 가능하게 관리할 수 있습니다. 상태 관리를 중앙 집중적으로 처리함으로써 여러 컴포넌트 간의 데이터 흐름을 간단하게 관리할 수 있습니다.

Vuex 예시 코드


// store.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: {
    doubledCount(state) {
      return state.count * 2
    }
  }
})

// CounterComponent.vue

위의 코드는 Vuex를 사용하여 카운터 기능을 구현한 예시입니다. 상태(state)와 변이(mutations), 액션(actions), 게터(getters)를 사용하여 카운트를 관리하고, 컴포넌트에서 상태와 작업을 매핑하여 사용합니다.

Leave a Comment