Vue-(11) vuex 상태관리 라이브러리
Vuex 상태관리 라이브러리
컴포넌트가 많아졌을때 관리할 수 있는 방법이 무엇일까 ? -> 복잡한 컴포넌트들의 관리 문제점을 해결하기 위함
Vuex 용어
4가지로 용어 쉽게 정리 가능 state => data (property) getters => computed mutations => method actions => 비동기 method
하나의 스토어보다는 여러가지 스토어를 관리해야하고, 스토어를 구조화하는 방법과 모듈 구조화하는 방법을 알 필요가 있다. 그래야 앱이 커지면 커질수록 잘 관리할 수 있기 때문이다.
Vuex란?
- 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
- React의 Flux 패턴에서 기인함
- Vue.js 중고급 개발자로 성장하기 위한 필수 관문
Flux란?
- MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Unidirectional data flow
Action -> Dispatcher -> Model -> View
- action : 화면에서 발생하는 이벤트 또는 사용자의 입력
- dispatcher : 데이터를 변경하는 방법, 메서드
- model : 화면에 표시할 데이터
- view : 사용자에게 비춰지는 화면
MVC 패턴과 Flux 패턴 비교
- MVC 패턴
- Flux 패턴
MVC 패턴의 문제점
- 기능 추가 및 변경에 따라 생기는 문제점을 예측할 수가 없음. 예) 페이스북 채팅 화면
- 앱이 복잡해지면서 생기는 업데이트 루프
Flux패턴의 단방향 데이터 흐름
- 데이터 흐름이 여러 갈래로 나뉘지 않고 단방향으로만 처리
Vuex가 왜 필요할까?
- 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트간에 데이터 전달이 어려워진다.
이벤트 버스로 해결?
- 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어려움
- 컴포넌트간 데이터 전달이 명시적이지 않음
Vuex로 해결할 수 있는 문제
- MVC 패턴에서 발생하는 구조적 오류
- 컴포넌트간 데이터 전달 명시
- 여러개의 컴포넌트에서 같은 데이터를 업데이트 할때 동기화 문제
Vuex 컨셉
- State : 컴포넌트간에 공유하는 데이터 -> data()
- View : 데이터를 표시하는 화면 -> template
- Action : 사용자의 입력에 따라 데이터를 변경하는 methods 또는 이벤트로직을 발생시키는 methods -> methods
단방향 데이터 흐름 처리를 단순하게 도식화한 그림
Vuex 구조
Vue Componetns(컴포넌트) -> Actions(비동기 로직 처리) -> Mutations(동기 로직 처리) -> State(상태=데이터) -> Vue Componetns(컴포넌트) 순으로 돌아간다.
Actions은 비동기로직만 처리를 하고 데이터(state)를 바꾸지는 못한다. Mutations은 데이터(State)를 바꿀 수 있으며, 동기 처리를 한다.
왜 Actions가 있고 왜 Mutations이 있는지 알 필요가 있다.
Vue.use(Vuex)의 사용
Vue.use(Vuex);
use는 vue의 플러그인이라는 기능 Vue를 쓸 때 전역에 특정 기능을 사용하고 싶을 때 사용한다.
Vuex 기술요소
- state : 여러 컴포넌트에 공유되는 데이터 -> data
- getters : 연산된 state값을 접근하는 속성 -> computed
- mutations : state값을 변경하는 이벤트 로직 또는 메서드 -> methods
- actions : 비동기 처리 로직을 선언하는 메서드 -> async methods
//Vue
data: {
message: 'Hello Vue.js!'
}
//Vuex
state: {
message: 'Hello Vue.js!'
}
<!-- Vue -->
<p><p>
<!-- Vuex -->
<p></p>
댓글남기기