Store를 공부하려다보니 자연스레 Vuex를 접하게 되었다.

여러 자료들을 내가 이해하기 쉽게 정리해 보았다.

서론

[ Vuex는 어떤 문제를 해결하기 위해 고안 되었는가???? ]

컴포넌트 기반 프레임 워크에서는 여러 컴포넌트들로 화면을 구성합니다.

규모가 크고 복잡한 어플리케이션일수록 다음과 같은 문제점들로 인해 컴포넌트 간 통신이나 데이터 전달을 좀 더 유기적으로
관리할 필요성이 생깁니다.

1. 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐야 할 컴포넌트가 많아지거나
2. 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려운 것

MVC 패턴 (결함이 있는 기존 아키텍쳐)

MVC 패턴의 큰 특징 중 하나가 "양방향 데이터 흐름" 입니다.

양방향 데이터이기 때문에 프로젝트 규모가 커질수록 복잡해지고 관리가 어렵습니다.
페이스북을 예시로 페이스북의 알람 정보가 제대로 업데이트가 되지 않아 알람 표시가 계속 유지되는 문제가 있었다고 합니다.

FaceBook은 MVC패턴이 소규모 애플리케이션에는 적합하지만 Model과 Veiw가 대량으로 시스템에 추가되면 복잡도가 폭발적으로
증가한다고 말했습니다.

MVC 패턴의 문제점

1. 이해와 디버깅이 어렵다.

2. 깨지기 쉽고 예측 불가능한 코드

3. 기존 기능에 문제가 생길까 코드를 수정하지 못하는 문제

상태 관리

이러한 문제점을 해결하기 위해 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태관리 입니다.

기존 아키텍쳐의 문제점들을 해결하는 과정에서 개발자들은 '플럭스(flux)'라는 어플리케이션 아키텍처를 구축하게 되었습니다.
플럭스는 Vuex, Redux 및 기타 유사 라이브러리의 기초를 이룹니다.

Flux 패턴

복잡한 데이터 흐름을 해결한 단방향 데이터 흐름의 개발 패턴 입니다.

데이터 흐름이 여러 갈래로 나뉘지 않고 단방향으로 처리가 됩니다.

기존 패턴의 문제점들이 다음과 같이 해결이 됩니다.

1. 단방향으로 흐르기에 데이터 흐름이 예측 가능
2. store에 의해 관리를 해서 애플리케이션의 다른 부분들과 결합도가 낮음 => 새로운 작업 시 의존성에 겁먹을 필요가 적어짐

Flux 패턴의 주요 원칙

1. Single Source of Truth (단일 데이터 소스)

- 컴포넌트들 간에 공유하는 데이터는 이를 사용하는 컴포넌트와는 별도로 단일 위치에 보관해야 합니다.
- 이 단일 위치를 'Store(저장소)'라고 합니다.

2. Data is Read-Only

- 컴포넌트들은 저장소에서 데이터를 자유롭게 읽을 수 있습니다. 그러나 직접 변경할 수는 없습니다.
- 데이터를 변경할 것이라는 것을 store에 알려야 하며, store는 'Mutations(뮤테이션)' 이라고 하는 함수들을 통해
변경을 완수해야 할 책임이 있습니다.

※ 데이터에 불일치가 일어나거나 데이터에 다른 문제들이 생겼을 때 여러곳을 뒤질 필요도 없고,
컴포넌트가 예상치 못한 방식으로 데이터를 변경할 가능성을 최소화 해줍니다.

3. Mutains are Synchronous(Mutation은 동기적)

- mutaion이 비동기적으로 일어난다면 mutaion의 commit과 응답 상태가 어떻게 변경되는 추적이 불가능해집니다.
(commit이 언제 발생했는지는 알 수 있어도, commit 안에 콜백이나 Promise 같은 것들이 들어간다면 추적이 불가능해집니다)
- mutaion이 동기적으로 일어나는 것은 데이터가 예측할 수 없는 이벤트의 순서와 시간에 종속되지 않도록 보장합니다.

※ vue의 상태관리 패턴

vue의 상태 관리 구성 요소

state : 컴포넌트 간에 공유할 data

view : 데이터가 표현될 template

actions : 사용자의 입력에 따라 반응할 methods

new Vue({
  // state
  data() {
    return {
      counter: 0
    };
  },
  // view
  template: `
    <div>{{ counter }}</div>
  `,
  // actions
  methods: {
    increment() {
      this.counter++;
    }
  }
});

위 구성요소는 아래와 같은 단방향 흐름으로 동작합니다.

Vuex란?

여러 프레임워크들이 MVC 패턴을 구현하듯이, Flux패턴을 구현한 Vue.js의 상태관리 패턴 + 라이브러리 입니다.

state, mutaitons, actions, getter 4가지 형태로 관리가 되며 관리 포인트는 store 라고 불립니다.

State

원본 소스 역할인 data라고 볼 수 있습니다.

state 는 mutation을 통해서만 변경이 가능합니다.

Mutations

유일하게 state를 변경할 수 있는 방법이며 메서드와 유사합니다.

commit을 통해서만 호출 할 수 있으며 함수로 구현됩니다.

Actions

비동기 작업이 가능합니다.,

mutation을 호출하기 위한 commit이 가능합니다.

action은 dispatch를 통해 호출할 수 있습니다.

axios를 통한 api호출과 그 결과에 대해 return을 하거나 mutation으로 commit 하는 용도로 사용됩니다.

Getter

Vue 컴포넌트의 computed처럼 계산된 속성입니다.

state에 대해 연산을 하고 그 결과를 view에 바인딩 할 수 있습니다.

state의 변경 여부에 따라 view를 업데이트 합니다.

1. Vue Components 에서 Dispatch를 통해 action을 실행 합니다. (ex : 리스트 페이지 변경이나 버튼 클릭 등등)

2. Action 에서는 외부 Api를 호출하는 등 비동기 로직을 처리 합니다.
그 결과를 이용해 동기 로직인 Mutations를 호출합니다. (commit을 통해 mutation을 실행)

3. mutation에서 State(data)를 변경합니다.(mutate)

4. getter를 이용하여 다시 Component에 바인딩되어 화면을 갱신합니다.

'개발 > Vue' 카테고리의 다른 글

[Vue] Vuex 활용해보기 03 - Mutations (0)	2022.12.28
[Vue] Vuex 활용해보기 01 - Vue앱과 비교, Vuex의 state (0)	2022.12.28
[Vue] Vue02 (0)	2022.12.28
[Vue] Vue01 (0)	2022.12.28
[Vue] V-model : Vue2와 Vue3에서의 차이 (0)	2022.12.13

Hoist

[Vue] Vuex와 Store

서론

[ Vuex는 어떤 문제를 해결하기 위해 고안 되었는가???? ]

MVC 패턴 (결함이 있는 기존 아키텍쳐)

상태 관리