들어가기 전..
작년 초 Vue 스터디를 했을 때 vuex에 대한 주제도 나왔었습니다.
다 같이 읽기는 했지만 당시에는 낯설었던 용어들에 이해를 제대로 하지 못한 상태로 넘어간 것 같네요.
그런 상태로 사용했었는데.. 제대로 이해하기 위해 오늘은 Vuex에 대해 적어볼까 합니다.
Vuex? 상태 관리??
Vuex는 Vue.js 에 대한 상태 관리 패턴 + 라이브러리입니다.
Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다.
또한, 애플리케이션에서 Flux 아키텍쳐를 구현하는데 도움을 주는 라이브러리이기에
Vuex를 제대로 설명하기 전,
상태 관리와 MVC 패턴과 Flux 패턴에 대해 가볍게 짚고 넘어가겠습니다.
상태 관리란?
상태(state)는 뷰 data 속성과 비슷합니다.
상태 관리는 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미합니다..
상태 관리가 필요한 이유
컴포넌트 기반 프레임 워크에서는 여러 컴포넌트들로 화면을 구성합니다.
이 티스토리가 SPA 구조일 시 Header, 그 안에 title, tistory-logo 등.. UI가 각각 컴포넌트로 구성되어 있습니다.
단순한 앱이면 상관없지만
규모가 크고 복잡한 앱일수록 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리가 필요합니다
앱의 규모가 커지면
- props , emit 이 거쳐야 할 컴포넌트가 많아집니다
- Event Bus를 쓴다고 하더라도 이벤트를 어디서 보내고 받았는지 데이터 흐름을 파악하기 어렵습니다.
이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리입니다.
MVC 패턴
사실 MVC 패턴의 큰 단점은 겪어본 적이 없지만.. MVC 패턴의 큰 특징 중 하나가 "양방향 데이터 흐름"입니다.
MVC 패턴이 긴 역사를 가진 만큼 다양한 패턴이 존재하지만 일반적으로는 아래와 같습니다.
- Model 응용프로그램의 동작 및 데이터 관리
- View UI를 화면에 표출
- Controller 사용자의 입력을 받아 Model을 조작하고 View를 업데이트
양방향 데이터이기에 프로젝트 규모가 커질수록 복잡해지고 관리가 어렵습니다.
"페이스북 MVC"만 검색해도 우수수 내용이 나오는데요.
페이스북의 알람 정보가 제대로 업데이트가 되지 않아 알람 표시가 계속 유지되는 문제가 있었다고 합니다.
Facebook은 소규모 애플리케이션에는 적합하지만 아래와 같이 문제점을 이야기하며
Model과 view가 대량으로 시스템에 추가되면 복잡도가 폭발적으로 증가한다고 말했습니다.
MVC 패턴의 문제점
- 이해하고 디버깅 어렵습니다.
- 깨지기 쉽고 예측 불가능한 코드
- 이미 존재하는 기능에 문제가 발생시킬까 두려워 코드를 수정하지 못하는 심각한 문제
Flux 패턴
Flux는 MVC 패턴에서 겪은 복잡한 데이터 흐름을 해결한 단방향 데이터 흐름의 개발 패턴입니다.
데이터 흐름이 여러 갈래로 나뉘지 않고 단방향으로 처리가 됩니다.
MVC의 문제들이 해결이 됩니다.
- 단방향으로 흐르기에 데이터 흐름이 예측 가능
- store에 의해 관리를 해서 애플리케이션의 다른 부분들과 결합도가 낮음
- => 새로운 작업을 할 때 의존성에 겁먹을 필요가 적다
Vue 상태 관리
Vuex 가이드에 있는 간단한 타이머 앱을 예시로 들겠습니다.
new Vue({
// 상태(state)
data () {
return {
count: 0
}
},
// 뷰(view)
template: `
<div>{{ count }}</div>
<button @click="increment">count up</button>
`,
// 액션(action)
methods: {
increment () {
this.count++
}
}
})view인 template에서 "count up" 버튼을 클릭하면 action인 method increment가 호출됩니다.
action이 state인 data 값을 변경합니다.
즉,
상태(State) 앱을 작동하는 data입니다.
뷰(View) 데이터를 받아 그려주는 ui 화면입니다
액션(Actions) 사용자의 입력에 따라 반응적으로 데이터를 변경하는 method입니다.
아래는 단방향 데이터 흐름 개념을 단순한 게 그린 도표입니다.
위와 같이 단순한 앱일 경우 Vuex는 필요 없겠지만요..
자, 이제 Vuex 설명으로 가겠습니다.
Vuex
Vuex는 중앙 위치에서 상태를 저장하여 어떤 컴포넌트라도 쉽게 상호 작용할 수 있게 돕는 라이브러리입니다.
state , mutations , actions , getter 4가지 형태로 관리가 되며 관리 포인트는 store 라 불립니다.
State
Vue component에서는 원본 소스 역할인 data로 볼 수 있습니다.
state는 mutation을 통해서만 변경이 가능합니다.
Mutations
유일하게 state를 변경할 수 있는 방법이며 메서드와 유사합니다.
commit을 통해서만 호출 할 수 있으며 함수로 구현됩니다.
API를 통해 전달받은 데이터를 mutations에서 가공하여 state를 변경합니다.
Actions
비동기 작업이 가능합니다.
mutation을 호출하기 위한 commit이 가능합니다.
action은 dispatch를 통해 호출할 수 있습니다.
axios를 통한 api 호출과 그 결과에 대해 return을 하거나 mutation으로 commit하는 용도로 사용됩니다.
Getter
Vue componet의 computed처럼 계산된 속성입니다.
state에 대해 연산을 하고 그 결과를 view에 바인딩 할 수 있습니다.
state의 변경 여부에 따라 view를 업데이트합니다.
Vuex의 데이터 흐름
Vuex 또한 단방향 데이터로 흘러갑니다.
위의 Vue 상태 관리를 이해하셨다면 Vuex 또한 이해하시기 편하실 겁니다.
- Vue Component에서 Dispatch([action method name])를 통해 action을 실행합니다..
- (ex. 리스트 페이지 변경이나 버튼 클릭 등등)
- Action에서는 외부 Api를 호출하는 등 비동기 로직을 처리합니다.
- 그 결과를 이용해 동기 로직인 Mutaions을 호출합니다.
- Commit([mutations method name])를 통해 Mutation을 실행
- Mutation에서 State(data)를 변경합니다.
- getter를 이용하여 다시 Compoent에 바인딩돼 화면을 갱신합니다.
이러한 방식으로 데이터가 흘러갑니다.
State(data)를 변경할 수 있는 것은 오로지 Mutations 뿐입니다.
이 안에서 filter, reduce 등 다양한 방법으로 데이터를 가공할 수 있습니다.
modules에서 각종 목적에 맞는 항목을 분리할 수 있습니다.
⚠️Vuex 사용시 주의사항⚠️
- 페이지 새로고침시 store에 의존하는 데이터가 사라집니다. 이는 쿠키, 스토리지 등으로 작업할 수 있습니다.
- 이는 쿠키, 스토리지 등으로 저장해줍니다.
- vuex-persistedstate 라이브러리가 있기도 합니다.
- 모든 store 값들을 localstorage로 저장할 시 속도 이슈가 발생할 수 있으니 option 확인 후 사용해야 합니다.
- 단순한 앱일 경우 간단한 Global event bus가 더 깔끔할 수 있다.
- 성능 이슈가 생길 수 있으니 배포 시 strict 모드를 켜지 마세요.
공통적으로 사용하지 않는 모든 데이터들을 vuex로 상태관리 할 경우 메모리를 많이 잡아먹는다는데..그건 조금 더 찾아보고 제대로 작성하겠습니다.
다음에는 사용방법에 대하여 작성하겠습니다.
참고
https://ict-nroo.tistory.com/106
https://joshua1988.github.io/web-development/vuejs/vuex-start/
https://kdydesign.github.io/2019/05/09/vuex-tutorial/
https://kdydesign.github.io/2019/04/10/vuejs-performance/
'FRONT > Vue.js' 카테고리의 다른 글
| Vue3 - 동영상 url로 썸네일 직접 만들기... (Canvas/vue3/typescript) (0) | 2023.01.05 |
|---|