Vuex : Store, State, Mutation, Action, Getter

Vue.js Vuex: 깊이 있는 이해를 위한 상세 가이드

Vue.js 애플리케이션의 규모가 커지면서 복잡한 상태 관리가 필수적으로 요구됩니다. 이러한 문제를 해결하기 위해 Vue.js 공식 상태 관리 라이브러리인 Vuex가 등장했습니다. Vuex는 중앙 집중식 저장소를 통해 애플리케이션의 상태를 관리하고, 예측 가능한 방식으로 상태를 변경할 수 있도록 돕습니다.

이 글에서는 Vuex의 핵심 개념인 Store, State, Mutation, Action, Getter에 대해 깊이 있게 살펴보고, 각 개념이 어떻게 상호 작용하며 Vuex가 어떻게 효과적인 상태 관리를 가능하게 하는지 알아보겠습니다.

1. Store (스토어)

Store는 Vuex 애플리케이션의 상태를 저장하는 루트 객체입니다. 모든 컴포넌트는 Store에 정의된 상태에 접근하고 변경할 수 있습니다. Store는 다음과 같은 속성을 가집니다.

• state: 애플리케이션의 상태를 정의하는 객체입니다.
• mutations: 상태를 변경하는 함수입니다.
• actions: 비동기 작업을 처리하고 mutations을 호출하는 함수입니다.
• getters: state에서 파생된 값을 계산하는 함수입니다.

728x90

2. State (상태)

State는 애플리်း케이션의 현재 상태를 나타내는 단일 소스 오브 트루스입니다. 모든 컴포넌트는 state를 참조하여 화면에 표시되는 데이터를 결정합니다. State는 일반적인 JavaScript 객체이며, Vuex의 반응성 시스템 덕분에 state가 변경되면 연관된 컴포넌트가 자동으로 업데이트됩니다.

예시:

// store/index.js
const state = {
  count: 0
}

 

3. Mutation (뮤테이션)

Mutation은 state를 동기적으로 변경하는 유일한 방법입니다. Mutation은 함수 형태로 정의되며, 첫 번째 인자로 state 객체를 받습니다. Mutation은 항상 예측 가능한 방식으로 state를 변경해야 하며, 여러 개의 mutation을 연속적으로 호출하여 복잡한 상태 변경을 구현할 수 있습니다.

예시:

// store/index.js
const mutations = {
  increment (state) {
    state.count++
  }
}

 

4. Action (액션)

Action은 비동기 작업을 처리하고 mutations을 호출하여 간접적으로 state를 변경하는 함수입니다. Action은 서버와 통신하거나 다른 비동기 작업을 수행할 때 유용합니다. Action은 commit 메서드를 통해 mutation을 호출합니다.

예시:

// store/index.js
const actions = {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

 

5. Getter (게터)

Getter는 state에서 파생된 값을 계산하는 함수입니다. Getter는 computed property와 비슷하지만, 다른 컴포넌트에서 재사용할 수 있다는 장점이 있습니다. Getter는 state가 변경될 때 자동으로 재계산됩니다.

예시:

// store/index.js
const getters = {
  doubledCount: state => {
    return state.count * 2
  }
}

 

Vuex의 작동 방식

1. 컴포넌트에서 action을 dispatch합니다.
2. Action은 비동기 작업을 수행하고 commit 메서드를 통해 mutation을 호출합니다.
3. Mutation은 state를 직접 변경합니다.
4. State가 변경되면, getter가 자동으로 재계산됩니다.
5. 컴포넌트는 computed property 또는 template에서 getter를 사용하여 업데이트된 값을 표시합니다.

Vuex를 사용하는 이유

• 중앙 집중식 상태 관리: 애플리케이션의 모든 상태를 한 곳에서 관리하여 데이터 흐름을 명확하게 파악하고 예측 가능한 상태 변경을 구현할 수 있습니다.
• 컴포넌트 간 데이터 공유: 복잡한 컴포넌트 계층에서도 쉽게 데이터를 공유하고 관리할 수 있습니다.
• 시간 여행 디버깅: 상태 변경 기록을 추적하여 버그를 쉽게 찾고 수정할 수 있습니다.
• 모듈화: 대규모 애플리케이션을 작은 모듈로 나누어 관리할 수 있습니다.

결론

Vuex는 Vue.js 애플리케이션의 상태 관리를 위한 강력한 도구입니다. Store, State, Mutation, Action, Getter라는 핵심 개념을 이해하고 효과적으로 활용하면 복잡한 애플리케이션도 깔끔하게 관리할 수 있습니다.