Vue.js - Vuex 개념 및 states

Vuex란?

 

Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다.

다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있습니다.

 

정리하자면,

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

 

---

상태 관리(State Management)가 왜 필요한가?

 

컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다.

예를들면, header, button, list 등의 화면 요소가 각각 컴포넌트로 구성되어 한 화면에서 많은 컴포넌트를 사용합니다.

이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생깁니다.

 

---

상태 관리란?

 

상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴을 의미합니다.

뷰와 성격이 비슷한 프레임워크인 리액트(React)에서는 Redux, Mobx와 같은 상태 관리 라이브러리를 사용하고 있고 뷰에서는 Vuex라는 상태 관리 라이브러리를 사용합니다.

 

 

상태 관리로 해결할 수 있는 문제점은 무엇인가?

상태관리는 중대형 규모의 웹 어플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있습니다.

일반적으로 앱의 규모가 커지면서 생기는 문제점들은 아래와 같이 있습니다.

 - 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐야할 컴포넌트가 많아지거나

 - 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려운 것

이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리입니다.

 

또한, MVC 패턴에서 발생하는 구조적 오류를 해결할 수 있습니다.

 

---

MVC 패턴의 문제점

 

뷰와 모델이 양방향 통신이 가능하므로 하나의 뷰가 모듈을 변경했을 때, 다시 그 모듈이 연관된 뷰들을 갱신하고, 업데이트 된 뷰들이 연관된 모델을 다시 갱신하고, 엮이고 엮이는 관계를 추적하기가 힘듭니다.

ex) 페이스북 채팅화면 - 어느 사용자는 읽었고, 어느사용자는 안읽었고 이런 부분들을 처리하기 굉장히 난해

추가로, 기능 추가 및 변경에 따라 생기는 문제점을 예측할 수가 없습니다.

앱이 복잡해질수록 생기는 업데이트 루프도 복잡해집니다.

 

출처 :  https://ict-nroo.tistory.com/106

 

 

---

상태 관리 컨셉 및 구성요소

 

 - state : 컴포넌트 간에 공유할 data

 - view : 데이터가 표현될 template

 - actions : 사용자의 입력에 따라 반응할 methods

 

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

 

 - View(Template)에서 버튼을 클릭했을 때, 클릭이라는 Action(Method)이 발생합니다.

 - 해당 Action이 동작을 통해서 State(data)를 변경합니다.

 

 

---

Vuex 구조

 

*뷰 컴포넌트 → 비동기 로직 → 동기 로직 → 상태 

 - 시작점은 Vue Component 입니다.

 - 컴포넌트에서 비동기 로직(Method를 선언해서 API를 콜 하는 부분 등)인 Action을 콜합니다. 

 - Actions는 비동기 로직만 처리할 뿐 State(data)를 직접 변경하지 않습니다.

 - Actions가 동기 로직인 Mutations를 호출해서 State(data)를 변경합니다.

 - Mutations에서만 State(data)를 변경할 수 있습니다.

 

---

다음 포스팅에는,

state와 getters, Mutations, Action에 대하여 공부해보겠습니다.

 

출처 : https://joshua1988.github.io/web-development/vuejs/vuex-start/