도대체 Vuex가 뭐길래?

8 min readMay 15, 2018

본 포스트는 Anthony Gore 의 https://vuejsdevelopers.com/2017/05/15/vue-js-what-is-vuex/ 포스트를 요약 및 번역한 것입니다. 오역에 대해선 언제든지 지적부탁드립니다 :)

Vuex. “Vewks”라고 읽으시나요, 아니면”Veweks”라고 읽으시나요? 아니면 혹시 프랑스 스타일의 조용한 “x”로 발음되는 “vew”라는 읽어야 하는 것일까요?단어를 읽는 법부터 햇갈리기 시작합니다.

저는 열렬한 Vue 개발자이기 때문에, Vuex가 실제로 무엇인지 몰라도 그것이 Vue 생태계의 중요한 부분은 차지하는 것임을 인지할 만큼 충분히 들어왔습니다.

결국 호기심에 지쳐서 Vuex의 간단한 정의라도 알고자 Vuex 공식 문서를 훑어보게 되었습니다.

유감스럽게도 저는 문서에서 “state management pattern”,”global singleton”,”source of truth”와 같은 낯선 용어들을 접하게 되었습니다. 이 용어들은 이 개념에 대해 이미 알고 있는 사람이라면 친근했을 법한 단어들이었지만, 저에게는 아니었습니다.

그래도 제가 알게 된 한가지는, Vuex가 Flux와 Redux와 관련이 있다는 것이었습니다. 물론 전 이것들도 Vuex와 마찬가지로 전혀 감이 안잡혔지만, 공부해보면 도움이 될 것 같았습니다.

약간의 연구와 끈기를 갖고 공부해보니, 복잡한 전문 용어 뒤의 숨어있던 개념들이 이해되기 시작했습니다. 이것들을 이해하고 난 후에 다시 Vuex 문서로 돌아가 보니 Vuex가 정말 쩐다는 사실을 알게되었습니다.

아직도 Vuex를 읽는 법은 잘 모르지만, Vuex는 제가 Vue 어플리케이션을 짜는데 필수적인 부분이 되었습니다. 여러분도 아마 한번쯤은 확인해 볼 가치가 있을 것 같습니다. 이것이 제가 Vuex의 간단한 입문서를 작성하게 된 계기입니다.

Vuex가 해결할 수 있는 문제들

Vuex를 이해하려면 먼저 이것이 어떤 문제를 해결하기 위해 고안되었는지를 찾아봐야합니다.

채팅 앱을 개발했다고 가정해 봅시다. UI에는 현재 보고 있지 않은 다른 사용자의 읽지 않은 메시지를 사용자에게 알리기 위한 사용자 목록, 개인 채팅 창, 채팅 기록이 있는 받은 편지함 및 알림 표시줄이 있습니다.

수백만명의 사용자들이 매일 당신의 앱을 통해 수백만명의 다른 사용자들과 채팅을 하고 있습니다. 그러나 사용자들에게서 알림 표시줄에서 잘못된 알림을 보내는 경우가 있다고 보고를 받습니다. 사용자들이 이미 읽은 메시지를 읽지 않은 메시지라고 표시한다는 것이죠.

제가 설명한 것은 페이스북 채팅 시스템에서 실제로 발생했던 문제입니다. 이 문제를 해결하는 과정에서 개발자들은 “플럭스(flux)”라는 애플리케이션 아키텍처를 구축하게 되었습니다. 플럭스는 Vuex, Redux및 기타 유사 라이브러리의 기초를 이룹니다.

Flux

페이스북 개발자들은 얼마 동안 이 “좀비 알림”과 씨름했습니다. 그들은 결국 그것이 단순한 버그 이상의 것임을 깨닫게 되었습니다. 애플리케이션 아키텍처의 몇가지 근본적인 결함이 있었던 것입니다.

이 결함은 추상적으로 설명하자면 이러합니다. 애플리케이션을 데이터를 공유하는 구성 요소가 여러개 있으면, 그 구성 요소들이 복잡하게 상호 작용할수록 데이터의 상태를 더 이상 예측할 수 없거나 이해할 수 없는 지점까지 증가합니다. 결국 애플리케이션을 확장하거나 유지 관리할 수 없는 상황이 발생할 수 있습니다.

Flux 의 개념은 이러한 결함을 충분히 완화시키는 확장 가능한 아키텍처를 설명하는 일련의 가이드 원칙들을 만드는 것이었습니다. 비단 채팅 앱뿐만 아니라 구성 요소 및 공유 데이터 상태가 있는 복잡한 UI앱에서도 적용되는 개념입니다.

Flux는 라이브러리가 아니라 패턴입니다.

Github에 가서 Flux를 다운 받을 수는 없습니다. 이것은 MVC와 같은 디자인 패턴입니다. Vuex 및 Redux와 같은 라이브러리는 마치 여러 프레임워크들이 MVC 패턴을 구현하듯이, Flux 패턴을 구현한 것입니다.

사실 Vuex는 Flux의 모든 패턴을 구현하지는 않습니다. 단지 하위의 일부분을 구현할 뿐이죠. 이 부분은 지금 신경쓰지 말고 대신 패턴의 주요 원칙을 이해하는 데 초점을 맞춥시다.

원칙 #1: Single Source of Truth (단일 데이터 소스)

컴포넌트들은 자기만 신경쓰면 될 로컬 데이터들을 갖고 있습니다. 예를 들어 사용자 목록 컴포넌트의 스크롤 막대 위치는 다른 컴포넌트들에서는 관심이 없는 데이터입니다.

그러나 컴포넌트들 간에 공유해야 하는 데이터(예:애플리케이션 데이터)는 이를 사용하는 컴포넌트와는 별도로 단일 위치에 보관해야 합니다.

이 단일 위치를 “store”(저장소)라고 합니다. 컴포넌트는 이 위치에서 애플리케이션 데이터를 읽어야 하며 충돌이나 불일치를 방지하기 위해 복사본을 자체적으로 보관해서는 안 됩니다.

// "store"를 초기화합니다.const store = new Vuex.Store({
  
  //"state"는 구성 요소들이 관찰할 애플리케이션 데이터입니다.
  state: {     
    myValue: 0   
  }
});// 컴포턴트들은 computed 속성에서 store의 state를 가져올 수 있습니다.const MyComponent = {   
  template: `<div>{{ myValue }}</div>`,
  computed: {
    myValue () {
      return store.state.myValue;
    }   
  } 
};

원칙 #2: Data is Read-Only (데이터는 읽기만 해야합니다.)

컴포넌트들은 저장소에서 데이터를 자유롭게 읽을 수 있습니다.그러나 직접 변경할 수는 없습니다.

대신에 데이터를 변경할 것이라는 것을 store에 알려야 하며, store은 “mutations”이라고 하는 정의된 함수들을 통해 변경을 완수해야할 책임이 있습니다.

왜 이렇게 번거롭게 접근을 할까요? 이렇게 데이터 변경 로직을 중앙 집중화하면 데이터에 불일치가 일어나거나 데이터에 다른 문제들이 생겼을 때 여러 곳을 일일이 뒤져볼 필요가 없습니다. 이것은 어떤 익명의 컴포넌트(아마도 써드 파티 모듈)가 예상치 못한 방식으로 데이터를 변경할 가능성을 최소화 해줍니다.

const store = new Vuex.Store({ 
  state: { 
    myValue: 0
  }, 
  mutations: { 
    increment (state, value) { 
      state.myValue += value;
    }
  } 
});// 값을 업데이트 해야할 상황이 생겼나요?// 틀렸습니다! 직접 store 데이터에 접근하지 마세요.
store.myValue += 10;// 그렇죠! 적절한 mutation을 호출해야합니다.
store.commit('increment', 10);

원칙#3:Mutations Are Synchronous (Mutation은 동기적이다)

위에 두가지 원칙을 지키는 애플리케이션에서 데이터를 디버그 하는 것이 훨씬 쉽습니다. mutation의 commit을 기록하고 응답 상태가 어떻게 변경되는지 관찰할 수 있습니다. (Vue Devtools에서 Vuex를 사용할 때 실제로 그렇게 디버그할 수 있습니다.)

그러나 만약 우리의 “mutation”이 비동기적으로 일어난다면 그런 방식의 디버그는 불가능할것입니다. commit이 언제 발생했는지는 알 수 있어도, commit안에 콜백이나 Promise 같은 것들이 들어간다면 추적이 불가능해집니다.

mutation이 동기적으로 일어나는 것, 데이터가 예측할 수 없는 이벤트의 순서와 시간에 종속되지 않도록 보장합니다.

마지막으로, 결국 Vuex는 뭔가요?

방금 다룬 몇가지 배경 지식을 통해서 마침내 이 질문에 어느정도 단서를 찾을 수 있습니다.

Vuex는 Vue 애플리케이션에서 Flux 아키텍처를 구현하는 데 도움이 되는 라이브러리입니다. 위에서 설명한 원칙들을 적용함으로써 Vuex는 여러 컴포넌트에서 데이터를 공유하는 경우에도 애플리케이션 데이터를 투명하고 예측 가능한 상태로 유지합니다.

Vuex를 구현하기 위해서는 store, mutators 가 포함되며 store에서 데이터를 읽는 모든 컴포넌트를 자동으로 업데이트합니다.

또한 핫 모듈 리로딩(실행 중인 애플리케이션에서 모듈 업데이트)및 시간 이동 디버깅(버그 추적을 위한 mutation 이벤트 역추적)과 같은 멋진 개발 기능을 제공합니다.

그거 쩌네요. 몇가지 질문이 있습니다만..

아마도 여러분의 앱에 Vuex가 필요한지 아닌지 궁금하실 겁니다. 어떻게 하면 디버깅을 할 수 있는건지 혹은 어떻게 비동기로 데이터를 변경 할 수 있는지..여러가지 궁금증들이 있을 수 있습니다.

이 포스트에서 저의 목적은 단지 여러분에서 Vuex에 대한 간결한 개념을 설명하는 것이었습니다. 이 포스트를 읽고 Vuex 공식 문서를 쭉 읽어보시면, 아마 지금 여러분들이 갖고 있는 여러가지 궁금증들을 대부분 해결하실 수 있을 것이라 생각합니다.