Vuex 공부일기 1 - Vuex 소개
vuex란 무엇인가?
vuex는 vue.js의 상태관리 패턴 + 라이브러리이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 한다.
상태관리 패턴이란 무엇인가?
Vue는 자체적으로 MVVM 패턴을 지향한다고 말할 수 있다. 그래서 앱의 화면을 구성하는 각각의 뷰들을 컴포넌트로 만들어 관리한다. 그래서 프로젝트가 크다면 각각의 컴포넌트들을 관리하기가 힘들어진다. 따라서 각각의 컴포넌트들의 상태(데이터)들을 관리하기 위한 것이 바로 상태관리 패턴이다.
상태관리 패턴의 필요성
Vue를 사용하는 앱이 커지면 크게 두가지 문제가 발생한다.
Vue의 컴포넌트간 기본 통신 방식인 부모-자식간 통신때문으로 불필요한 통신이 많이 생길 수 있다.
부모-자식 통신대신 Event Bus를 사용하면 이벤트 관리가 힘들다.
1의 경우를 설명하자면 컴포넌트가 극도로 중첩되어 부모-자식간 이동하는 데이터가 많아져 Props에 쌓이는 중복된 데이터들이 많아지며 먼 조상에게 이벤트를 알리기 위한 하나의 이벤트로 인해서 발생하는 연계 이벤트들이 불필요하게 많아지게 된다.
2의 경우가 많아지면 많아질 수록 유지보수가 힘들다는 단점이 발생한다.
상태관리 패턴
상태관리 패턴의 구성요소는 크게 3가지이다.
- View: 해당 컴포넌트가 표현되는 모습을 말한다.
- Actions: 사용자가 하는 행동에 대응하는 method를 말한다.
- State: 컴포넌트끼리 공유되는 공동의 데이터를 말한다.
각각의 구성요소는 위와 같은 방식으로 단방향 데이터 플로우로 상호작용한다.