이번 포스팅에서는 Vuex의 개념, 설치 및 등록방법에 대해 알아보기로 한다.
Vuex란?
- 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
- React의 Flux 패턴에서 기인함.
Facebook 앱과 같이 거대한 규모의 앱의 경우 채팅창의 이벤트와 상단의 상태관리바 등 여러가지 이벤트들을 MVC패턴으로는 추적하기가 굉장히 까다로웠다.
이러한 문제점을 해결하는 것이 바로 Unidirectional data flow(단방향 데이터 흐름)이다.
MVC패턴의 경우 Model과 View사이에서 데이터를 서로 주고받지만, Flux의 경우 Model에서 View로 데이터가 전달되면 View에서는 다시 Action으로 시작된다.
위는 앱이 복잡해지면서 생기는 업데이트 루프를 도식화 한 것이다.
MVC패턴은 Model과 View가 서로 다른 Model과 View를 요청하고 갱신하는 과정에서 어떠한 이벤트에서 문제점이 발생한건지 예측할 수가 없다.
이 문제를 해결하는하고자 나온 개념이 Flux이다.
이렇게 단방향으로 데이터가 흘러간다면 어떠한 View에서 어떠한 Action이 발생했고 어느 부분에서 에러가 발생한건지 예측이 가능해진다.
그럼 다시 Vuex 주제로 돌아와보자.
Vuex는 상태관리 라이브러라고 했다. 상태관리란 무엇일까?
상태 관리란?
상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴을 의미한다.
상태 관리로 무엇을 해결할 수 있을까?
상태 관리는 중대형 규모의 웹 애플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있다. 일반적으로 앱의 규모가 커지면서 생기는 문제점들은 다음과 같다.
- 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐할 컴포넌트가 많아지거나
- 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려운 것
이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리이다
상태 관리 패턴
상태 관리 구성요소는 크게 3가지가 있다.
- state : 컴포넌트 간에 공유할 data
- view : 데이터가 표현될 template
- actions : 사용자의 입력에 따라 반응할 methods
이렇게 Vuex의 개념과 구조에 대해 알아보았다.
다음 포스팅에서는 실제 Vuex의 사용 방법에 대해 알아보겠다.
