[Vue] Vuex? 상태관리? (개념/사용이유)

vuex라는 vue에서 컴포넌트간 유기적으로 데이터를 주고 받을 수 있는 패턴이자 라이브러리에 대해 알아보자

 

Vuex란?

1. Vue에서 사용하는 상태관리 패턴
2. 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴

 

Vuex 필요할까?

Vue는 가상 DOM을 활용하여 모든 요소를 실시간 반응형 컴포넌트로 생성할 수 있다는 특징이 있다.

 

프로젝트의 규모가 커질 수록, 컴포넌트는 늘어나게 되고 늘어난 컴포넌트들 관계에서 데이터를 주고 받는 부모/자식 관계는 더욱 복잡해질 것이다.

예를 들어, vue에서 한 페이지에서도 header, footer, button, list 등 여러 컴포넌트들이 겹쳐져 구성되는데 컴포넌트가 많아지게 된다면 컴포넌트간 통신(props, event emit 등)은 어떻게 될까?

 

 답은 하나, 더욱 복잡해지고 코드의 가독성, 유지보수성이 떨어질 것이다.

 

Vue에서 지원해주는 Vuex를 통해 해당 문제점을 보완할 수 있게 되었는데, Vuex를 사용하는 이유와 Vuex에 대하여 좀 더 깊이 알아보자.

 

Vuex를 사용하는 이유

Vuex를 사용하면, 대형 규모의 웹 어플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있다.

Vuex를 사용하지 않는다면 일반적으로 발생하는 문제점?

  - 일반적인 뷰의 컴포넌트 통신 방식은 props, emit 등인데 이 방식을 사용하면 할아버지에서 손자에게 데이터를 주고 싶다면 중간에 거쳐야 할 컴포넌트가 많아진다.
  - 이를 피하기 위해, Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기가 어려워진다.
  - 공통의 상태를 공유하기 때문에, 상태값이 여러 컴포넌트에서 동일한 상태로 관리되어야 한다. Vue는 단방향으로 데이터가 흐르기 때문에, 여러 컴포넌트가 한 상태를 공유하는 경우 형제 컴포넌트간의 상태공유/관리가 복잡해 질 수 있다.

위와 같은 문제점을 해결하기 위해 데이터를 중앙에서 관리할 수 있도록 Vuex가 도입되었다.

Vuex 공식 홈페이지에서 제공하는 이미지

위 그림과 같이 Actions, Mutations, State 부분이 Vuex로 구성된다.

그렇다면, Vuex의 구성요소인 Actions, Mutations, State를 더 알아보자.

 

Vuex의 구성요소

1. State - 데이터 객체

• 공통으로 참조하기 위한 변수를 정의한 것을 말한다.
• 프로젝트 모든 곳에서 이를 참조하고 사용할 수 있다.
• 컴포넌트 간의 공유할 data를 말한다.
• 즉각 반응형이기 때문에, v-model의 computed 메서드 중 get()이 선언되어 있다면 즉각적으로 반응한다는 특징을 갖고 있다.
• 일반적인 Vue컴포넌트의 watch처럼 $store.watch로 변화를 감지하고 핸들링 할 수 있다.
• 해당 값의 변환은 Mutations의 메서드를 통해 수행되기를 권장한다.

2. Mutations - 동기형 State 변경 처리기

• Vuex Store의 상태(State)를 변경시키기 위한 메서드 집합이다.
• 상태(State)의 조작은 오로지 Mutation의 메서드를 통해 수행되길 권장한다.
• 동기 처리를 한다.
• State에 데이터를 변경하기 위해선 commit('함수명', 전달값) 방식으로 변경한다.

3. Actions - Mutation 트리거

• 사용자의 입력에 따라 반응할 Methods를 말한다.
• Mutation을 실행시키는 역할을 담당한다.
• 비동기 처리를 한다. 즉, API 서버 통신과 같은 역할을 수행한다.
• dispatch('함수명', 전달값) 방식으로 메서드를 호출한다.
• 비동기 기준이므로 주로 콜백 함수로 작성한다.

 

Vue의 데이터 전달 프로세스

Vuex 흐름 관계

1. 컴포넌트에서 Dispatch를 통해 Actions을 호출, 접근한다.
2. Action에서 주로 Backend API를 호출하고 값을 가져온 후에, commit을 통해 Mutations을 호출한다.
3. Mutations을 이용하여 State값을 관리한다.
4. 변경된 State값을 getters를 통해 조회한다.