[Vue] Vue State Management(상태 관리)

Vue State Management(상태 관리)

Vue의 상태관리란

• Vue에서 상태 관리는 컴포넌트 간 데이터를 전달하고 관리하는 것을 의미한다.
• 상태 관리 방법으로는 props와 events, Vuex, Vue-observable, Vue-Composition-Api 등이 있다.
• 상태 관리를 효과적으로 사용하면 코드의 가독성과 유지보수성을 높이며, 애플리케이션의 성능을 향상시킬 수 있다.

특징

• Vuex는 Vue에서 제공하는 공식 상태 관리 라이브러리이며, 전역적으로 상태를 관리한다.
• Vue-observable은 Vue에서 제공하는 반응형 데이터를 구독할 수 있는 옵저버블 객체이다.
• Vue-Composition-Api는 Vue 3에서 추가된 Composition API를 사용하여 상태 관리를 할 수 있으며, Vue 2에서의 Options API보다 직관적이고 효율적이다.

Pass Props & Emit Event

• Vue에서 제공하는 가장 기본적인 방법 중 하나이다.
• 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하고, 이벤트를 발생시켜 상위 컴포넌트에서 데이터를 변경하는 방식으로 동작
• 각 컴포넌트는 독립적으로 데이터를 관리하며 같은 데이터를 공유하고 있으므로 각 컴포넌트가 동일한 상태를 유지한다.

장점

• 구현이 쉽고 이해하기 쉽다.
• 컴포넌트 간의 의존성이 낮아져서 컴포넌트의 재사용성이 높아진다.
• 상위 컴포넌트에서 하위 컴포넌트로 전달되는 props 데이터는 읽기 전용이므로, 예기치 않은 상태 변경을 방지할 수 있

단점

• 컴포넌트가 많아질수록 props 전달이 복잡해지고 유지보수가 어려워진다.
• 하위 컴포넌트에서 이벤트를 발생시키는 것은 간단하지만, 이를 상위 컴포넌트에서 처리하려면 이벤트 핸들러를 명시적으로 작성해야 하므로 코드가 복잡해진다.

Centralized Store

• 애플리케이션의 상태를 하나의 중앙화된 저장소(store)에 저장하고 관리하는 방식이다.
• 중앙화된 저장소에 데이터를 저장함으로써, 컴포넌트 간의 데이터 전달과 변경이 단순화되며, 데이터의 일관성을 유지할 수 있다.

특징

• 중앙화된 저장소: 애플리케이션의 데이터를 중앙화된 저장소에 저장하고 관리한다.
• 상태 변경: 상태를 변경하는 것은 일반적으로 저장소에 저장된 데이터를 직접 변경하는 방식으로 이루어진다.
• 컴포넌트 간의 데이터 전달: 데이터를 컴포넌트 간에 전달할 때는 Vuex에서 제공하는 mapState, mapMutations, mapGetters, mapActions 등의 헬퍼 함수를 사용한다.

Vuex의 개념

• State Management pattern + Livrary "for vue.js" (상태 관리 패턴 + 라이브러리)
• 전역적으로 상태를 관리하고, 컴포넌트 간에 쉽게 데이터를 공유할 수 있다.

특징

• 상태 중앙 집중화: Vuex는 중앙 상태 관리 패턴을 따르고, 모든 컴포넌트에서 동일한 데이터를 사용한다.
• 상태 불변성: Vuex의 상태 데이터는 불변성을 유지하며, 상태를 변경하려면 Vuex에서 제공하는 mutation을 통해 변경한다.
• 상태 업데이트 추적: Vuex에서 상태를 업데이트할 때는 mutation을 통해 업데이트하므로, 상태 변경 사항을 추적하고 디버깅하기 쉽다.

장점

• 전역 상태 관리: Vuex는 애플리케이션 전역에서 데이터를 관리하므로, 컴포넌트 간에 데이터를 쉽게 전달하고 공유할 수 있다.
• 유지보수성: 중앙화된 상태 관리를 사용하면 코드의 일관성과 유지보수성이 높아진다.
• 디버깅 용이성: 상태 업데이트 추적을 지원하므로, 상태 변경 사항을 쉽게 추적하고 디버깅할 수 있다.

단점

• 상태 관리 라이브러리를 사용함으로써 추가적인 코드 작성이 필요하다.
• Vuex를 사용하는 경우 애플리케이션의 규모와 복잡도가 적절하게 커야 한다.

vuex 생성

1. vue create vuex-app => Vue프로젝트 생성
2. cd vuex-app => 디렉토리 이동
3. vue add vuex => Vue CLI를 통해 vuex plugin 적용

vuex의 핵심 컨셉



Vue 인스턴스와 Vuex 인스턴스 비교

state: 중앙에서 관리하는 모든 상태정보.

• 중앙에서 관리하는 모든 상태정보
• 개별 component가 관리하던 data를 중앙 저장소(Vuex Store의 state)에서 관리하게 된다.
• $store.state로 state 데이터에 접근한다.

mutations: state를 변경하기 위한 methods.

• 실제로 state를 변경하는 유일한 방법이다.
• vue 인스턴스의 methos에 해당하지만 Mutations에서 호출되는 핸들러(handler)는 함수는 반드시 동기적이어야 한다.
• 비동기 로직으로 mutations를 사용해서 state를 변경하는 경우, state의 변화의 시기를 특정할 수 없기 때문이다.
• 첫 번째 인자로 state를 받으며, component 혹은 Actions에서 commit()메서드로 호출된다.

actions: 비동기 작업이 포함될 수 있는(외부API와의 소통 등) methods.

• state를 직접 변경하지 않고 commit()메서드로 mutations를 호출해서 state를 변경한다.
• context 객체를 인자로 받으며, 이 객체를 통해 store.js의 모든 요소와 메서드에 접근할 수 있다.
• state를 변경하는 것 외의 모든 로직을 진행하며, component에서 dispatch() 메서드에 의해 호출된다.

getters: state를 활용해 계산한 새로운 변수 값이다.

• state를 활용하여 계산된 값을 얻고자 할 때 사용하며, state의 원본 데이터를 건들지 않고 계산된 값을 얻을 수 있다.
• 첫번재 인자로 state, 두번째 인자로 getter를 받는다.

component에서 데이터를 조작하기 위한 데이터의 흐름

component => (actions) => mutations => state

component에서 데이터를 사용하기 위한 데이터의 흐름

state => (getter) => component

Vuex 실습

state 실습

1. index.js => state 작성

2. App.vue 작성

3. 결과 확인


actions 실습

1. index.js => actions 작성

2. App.vue 작성


mutations 실습

1. index.js 작성

2. 결과 확인


getters 실습

1. index.js 작성

2. App.vue 작성