Help
Table of Contents
Vuex #
Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리이다.
애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.
사용 이유 #
Vuex를 사용하는 가장 큰 이유는 상태 관리와 데이터의 움직임을 한 눈에 확인하기 위해서이다.
예를 들어 App.vue 컴포넌트에서 데이터를 전송한다고 한다.
todos: [
{id:1, name:"안녕"},
{id:2, name:"하이"}
]
App.vue에서 데이터를 선언한 후 받아오면 다른 참조하는 vue 컴포넌트들은
해당 값을 얻기위해 $emit 이나 $props를 이용해서 데이터를 가져와야 한다.
하지만 $emit, $props을 남발하면 문제점이 생긴다.
-- emit과 props의 문제점
- 데이터의 움직임을 확인하려면 해당 컴포넌트로 이동해야 한다.
- 부모 자식관계가 복잡해지면 데이터를 이동시키는 과정 혹은 이해하는 과정에서 난해하다.
[그림1] Vuex를 사용하지 않은 프로세스
[그림1]의 로직은 todo 리스트 프로세스이며 가장 상위 즉 부모 컴포넌트인 App.vue에서는 add, delete, toggle ... 등의 기능들을 이용하는 컴포넌트에 데이터를 보내주어야 한다.
즉, App.vue에서 Todo 컴포넌트까지 데이터를 보내려면 2deps를 거쳐야만 보낼 수 있는 것이다.
하지만 vuex를 사용하면 해당 과정을 크게 아낄 수 있다.
[그림2] Vuex를 사용한 프로세스
Vuex를 사용하면 [그림2]의 Store라는 저장 공간이 생기는데, 해당 공간에서 서버와의 통신을 관리해주는 상태 관리와 데이터를 가공할 수 있게 된다.
또한 전역적으로 선언되어 있기 때문에 해당 값을 필요로 한다면 어느 컴포넌트에서나 선언하여 사용이 가능하다.
-- Store(저장소)
Store는 Vuex에 사용하는 저장소같은 역할을 한다. <br>
예시로 데이터들은 DB에 저장되고 DB에서 불러올 때 api 통신을 이용하여 데이터를 불러오게 된다. <br>
마찬가지로 프론트엔드에서는 Store가 미니 DB 역할을 수행하며, 데이터를 가공할 수 있게하는 용도로 사용된다.
Vuex 패턴 #
Vuex의 패턴은 Flux 패턴에서 창안되어 사용되고있다. Flux 패턴은 MVC 패턴의 문제점을 보완하기 위해 만들어졌다.
MVC 패턴 #
-- MVC 패턴 특징
MVC 패턴 중 가장 큰 특징은 양방향 데이터 흐름이다.
- Model : 응용 프로그램의 동작 및 데이터 관리
- View : UI를 화면에 표출
- Controller : 사용자의 입력을 받아 Model을 조작하고 View를 업데이트
-- MVC 패턴 문제점
- 이해하고 디버깅이 어렵다.
- 깨지기가 쉬우며 예측하기 힘들다.
- 이미 존재하는 기능에 문제를 야기할까 두려워 코드 수정이 어렵다.
Flux 패턴 #
Vuex는 Flux 패턴에서 창안되어졌으며, Flux 패턴은 MVC 패턴에서 겪은 복잡한 데이터 흐름을 해결한 단방향 데이터 흐름의 개발 패턴이다.
-- Flux패턴을 통해 해결되는 MVC 패턴 문제점
- 단반향이기에 데이터 흐름 예측 가능
- Store로 중앙 집중식 관리형태를 띄어 애플리케이션의 다른 부분들과 결합도가 낮음
-- Flux패턴을 이용한 Vuex
Vuex는 Flux 패턴의 사이클 구조를 이용하여 상태를 관리한다.
Vuex 사용 #
Vuex는 Store에서 모든 상태관리가 이루어진다.
[그림3] Vuex Store 사이클
Vuex는 상태를 [그림3]과 같은 사이클 형태로 진행된다.
총 4가지의 단계를 가지고 있으며 진행은 액션, 변이, 상태를 총 3단계의 순으로 값을 변경하는 단계를 거친다.
-- Store동작 예시
빵을 만드는 공장이 있다.
여기서 공장은 Store(저장소)의 역할이 된다.
[목표]
빵을 만들기 위해 밀가루를 가져와야 한다.
[진행 순서]
1. State(상태)
"밀가루를 정한다"
= 밀가루는 State(상태) 즉, 하나의 변화할 수 있는 상태가 된다.
2. Actions(액션)
"밀가루를 상점에서 가져와야한다."
= 이 과정은 서버를 이용해 DB에서 데이터를 가져오는 과정이다.
"밀가루를 공장에 넣는다."
= 이 과정은 state(상태)를 변경하기 위해서 Actions(액션)내에서 Mutations(변이)를 선언한 것이다.
3. Mutations(변이)
"밀가루를 이용해 빵으로 만든다."
= 이 과정은 밀가루라는 state(상태)를 Mutations(변이)시키는 과정이다.
4. Getter/Computed(게터, 컴퓨티드)
"완성된 빵을 가져온다."
= 이 과정은 뷰 컴포넌트에서 가공된 State를 가져오는 과정이다.
State(상태) #
- Vue 컴포넌트의 원본 소스 역할인 data로 볼 수 있다.
- state는 mutation을 통해서만 변경하는 것을 권장한다.
- 컴포넌트에서는 [this.$store.state.상태명] 으로 호출한다.
Mutations(변이) #
- state(상태)를 변경하는 방법이며 메서드인 역할이다.
- 동기적으로 수행된다.
- 컴포넌트에서는 [this.$store.commit('변이명')] 으로 호출한다.
- 전달 값이 있다면 [this.$store.commit('변이명', payload)]
Actions(액션) #
- api 호출과 그 결과에 대해서 return 및 mutations(변이)를 사용한다.
- 비동기적인 작업을 수행한다.
- 컴포넌트에서는 [this.$store.dispatch('액션명')] 으로 호출한다.
- 전달 값이 있다면 [this.$store.dispatch('액션명', payload)]
Getters(게터) #
- Vue 컴포넌트에서의 computed처럼 계산된 값을 return하는 속성이다.
- state(상태)에 대한 연산을 하고 그 결과를 view에 바인딩이 가능하다.
- state(상태)가 변경되면 view에 업데이트 되어 반영된다.
Vuex Book(project) #
Vuex에 대한 이해를 높이기 위해서 제작한 Vuex Book 이다.
Vuex 사용 예제 코드와 컴포넌트에서 상태 호출법이 예제로 나타나있다.
Vuex refresh(새로고침) 문제점 #
Vuex에는 가장 큰 문제점이 있다.
새로고침 시, Store들의 상태들이 기본 값으로 초기화된다.
이를 방지하기 위해서 vuex-persistedstate 라는 npm이 존재하고 vuex에 저장되는 값들을 웹 브라우저의 localstorage에 저장하며, 새로고침시 그 값이 존재하면 localstorage의 값을 가져와 사용되는 원리이다.
하단의 링크를 통해 설치가 가능하다.
-- persistedstate 적용 방법
경로 : src/store/index.js
위 그림처럼 정의한 store에 플러그인만 넣어주면 된다.
-- persistedstate 속도 저하 해결
모든 store값들이 모두 localstorage에 저장되어, 가벼운 웹일 경우는 상관 없지만 사용량이 많아지면 속도에 큰 지장이 있다.
이를 해결할 방법으로는 vuex-persistedstate의 원하는 값만 store에 저장시킬 수 있는 옵션이 존재한다.
path 라는 옵션을 통해 배열안에 넣는 store만 localstorage에 저장된다.
이외에도 vuex-persistedstate 에서는 js-cookie, secure-ls를 이용하여 localstorage 말고도, cookie에 저장하는 방식과 암호화된 방식으로 데이터를 저장하는 방법을 알려주고 잇으니 관심있으면 npm에 접속을 추천한다.
