Vue.js 상태 관리

1 개요

Vue.js State Management

Vue.js 상태 관리

2 공식 Flux-유사 구현

• 대규모 애플리케이션은 여러 컴포넌트에 걸쳐 분산된 여러 상태와 그 상호작용으로 인해 점점 복잡성이 증가하곤 한다.
• 이러한 문제를 해결하기 위해, Vue는 Elm에서 영감을 받은 상태 관리 라이브러리인 vuex를 제공한다.
• vue-devtools과도 연동되며, 별다른 설정 없이 시간여행 디버깅을 사용할 수 있다.

2.1 React 개발자를 위한 안내

• React에서 넘어왔다면, 그쪽 생태계에서 가장 인기있는 Flux 구현체인 redux와 vuex의 비교에 관심을 있을 것이다.
• Redux는 사실 뷰-레이어(view-layer)와는 독립적(agnostic)이므로, 간단한 바인딩을 통해 Vue에서도 쉽게 사용할 수 있다.
• Vuex가 Redux와 다른 점은, Vue app에 대해 알고 있다는 점이다.
• 이 때문에 Vue와 더 잘 연동되어, 더 직관적인 API와 향상된 개발경험을 제공한다.

3 간단한 상태 관리 시작하기

• Vue 애플리케이션에서 데이터 소스는 날(raw) data 객체라는 점을 간과하게 쉬운데, Vue 인스턴스는 단순히 그것에 접근할 수 있는 프록시일뿐이다.
• 그러므로 여러 인스턴스에서 공유해야 하는 상태가 있다면 아이텐티티(identity)로 공유할 수 있다.

JavaScript

Copy

const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})

• 이제 sourceOfTruth가 변이(mutate)될 때마다, vmA와 vmB 둘다 자동적으로 그들의 뷰를 갱신할 것이다.
• 이 인스턴스들 내부의 각 하위 컴포넌트들은 this.$root.$data를 통해 접근할 수 있다.
• 이제 단일 데이터 소스를 가지게 되었지만, 디버깅은 극히 어려울 수 있다.
• 어느 데이터든 앱 내부에서 언제 어디서나 흔적도 없이 변경할 수 있기 때문이다.

• 이러한 문제를 해결하기 위해, store 패턴을 사용할 수 있다.

JavaScript

Copy

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

• store의 상태를 변이(mutate)시키는 모든 액션들이 store 자체 내부에 들어 있다는 점을 알아두자.
• 이러한 중앙집중식 상태 관리는 어떤 유형의 변이가 일어나고, 그것이 어떻게 트리거되는지를 이해하기 쉽게 해준다.
• 이제 뭔가 잘못되었을 경우, 무엇이 버그에 유발하는지 로그를 남길 수 있다.
• 또한, 각 인스턴스/컴포넌트는 여전히 각각의 비공개(private) 상태를 보유·관리할 수 있다.

JavaScript

Copy

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

참고:

• 액션에서 원래의 상태 객체를 교체해서는 안된다는 점에 유의해야 한다.
• 컴포넌트와 저장소는 변이를 관찰하기 위해 동일한 객체에 대한 참조를 공유할 필요가 있다.

• 컴포넌트가 state를 직접 변이시킬 수 없게 하고, 대신 store에 액션 수행 이벤트를 보내도록 하는 컨벤션을 계속 개발하다보니, 결국 Flux 아키텍처에 다다르게 되었다.
• 이러한 컨벤션의 이점은 store에서 발생하는 모든 상태 변이를 기록하고 변이 로그, 스냅샷, 히스토리 되돌리기 / 시간 여행 같은 향상된 디버깅 헬퍼를 구현할 수 있다는 것이다.
• 이것은 돌고돌아 vuex로 귀결되므로, 이 글을 충분히 읽어봤다면 도전해봄직하다.

4 같이 보기

• Vuex
• Flux

5 참고

• https://vuejs.org/v2/guide/state-management.html
• https://kr.vuejs.org/v2/guide/state-management.html