Vuex

상태 관리 라이브러리

• 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리

Flux 패턴

• MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Undirectional data flow
  • 아래의 순서로 단일 방향으로만 흐름이 흘러간다.
    1. actions : 화면에서 발생하는 이벤트 또는 사용자의 입력
    2. dispatcher : 데이터를 변경하는 방법, 메서드(model을 바꾸기 위한 역할)
    3. model : 화면에 표시할 데이터
    4. view : 사용자에게 비춰지는 화면, 화면에서 다시 action을 호출하게 된다. 그러면 다시 1->2->3->4 한 방향 흐름.
    
    
• 패턴 자체에서 데이터의 흐름을 정형화 시켜서 향후 발생할 수 있는 문제점들을 방지한다.

MVC 패턴의 문제점

• 뷰와 모델이 양방향 통신이 가능하므로 하나의 뷰가 모듈을 변경했을 때, 다시 그 모듈이 연관된 뷰들을 갱신하고, 업데이트 된 뷰들이 연관된 모델을 다시 갱신하고, 엮이고 엮이는 관계를 추적하기가 힘들다
  • ex) 페이스북 채팅화면 - 어느 사용자는 읽었고, 어느사용자는 안읽었고 이런 부분들을 처리하기 굉장히 난해했다.
• 기능 추가 및 변경에 따라 생기는 문제점을 예측할 수가 없음
• 앱이 복잡해질수록 생기는 업데이트 루프도 복잡해짐

Vuex가 필요한 이유

• 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다.

  • Vue.js의 기본 개념을 공부했다면 알겠지만, 로그인 폼에서 id를 하위 컴포넌트로 계속해서 전달해서 내려야 할 때, 중간에 거치는 컴포넌트들이 많아 질수록 계속해서 props를 선언해야 하므로 데이터 전달이 불편해진다.

• 이벤트 버스로 해결?

  • 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어렵다.

    // Login.vue
    eventBus.$emit('fetch', loginInfo);
    
    // List.vue
    eventBus.$on('display', data => this.displayOnScreen(data));
    
    // Chard.vue
    eventBus.$emit('refreshData', chartData);

  • 즉, 컴포넌트간 데이터 전달이 명시적이지 않다.

Vuex로 해결할 수 있는 문제

• MVC 패턴에서 발생하는 구조적 오류
• 컴포넌트 간 데이터 전달 명시
• 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제(mutation, actions)

Vuex 컨셉

• State : 컴포넌트 간에 공유하는 데이터 data()

• View : 데이터를 표시하는 화면 template

• Action : 사용자의 입력에 따라 데이터를 변경하는 methods

• 단방향 데이터 흐름 처리를 단순하게 도식화한 그림

  • View(Template)에서 버튼을 클릭했을때, 클릭이라는 Action(Method)이 발생한다.
  • 해당 Action이 동작을 통해서 State(data)를 변경한다.

Vuex 구조

• 뷰 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태
  • 시작점은 Vue Components이다.
  • 컴포넌트에서 비동기 로직(Method를 선언해서 API 콜 하는 부분 등)인 Actions를 콜하고,
  • Actions는 비동기 로직만 처리할 뿐 State(Data)를 직접 변경하진 않는다.
  • Actions가 동기 로직인 Mutations를 호출해서 State(Data)를 변경한다.
  • Mutations에서만 State(Data)를 변경할 수 있다.
• 참고자료
  • 자바스크립트 비동기 처리와 콜백 함수
  • 자바스크립트 Promise 쉽게 이해하기

Reference

• https://vuejs.org/v2/guide/
• https://kr.vuejs.org/v2/guide/
• https://www.inflearn.com/course/vue-pwa-vue-js-%EC%A4%91%EA%B8%89/

출처: https://ict-nroo.tistory.com/106 [개발자의 기록습관]