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

서론

---

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

 

---

 

Vuex가 왜 필요할까?

---

Vuex를 알아보기 전 Vue의 특성에 대해 알아보면 이해하기 더 쉬운데, Vue는 가상 DOM을 활용하여 모든 요소를 실시간 반응형 컴포넌트로 생성할 수 있다는 특징이 있다.

 

그런데 프로젝트의 규모가 커질수록 컴포넌트는 늘어날 수 밖에 없고 늘어난 컴포넌트들 관계에서 데이터를 주고 받는 부모 <-> 자식 관계는 점점 복집해질 수 밖에 없다.

 

이 부모와 자식 관계를 예로 들면, vue를 이용하여 페이지를 만든다하면 header, footer, button, list 등의 여러 컴포넌트로 구성된다.

 

이렇게 한 페이지에서도 여러 컴포넌트가 합쳐져서 만들어지게 되는데, 컴포넌트간 통신(props, event emit 등)이 점점 힘들어 질 수밖에 없다.

 

그래서 Vue에서는 Vuex라는 상태 관리 패턴을 지원해주었는데 이제 Vuex에 대해 알아보자.

 

---

 

Vuex란?

---

Vuex는 위에서 말했듯 상태 관리 패턴이면서 다시 말해,

여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴을 의미한다.

 

이 상태 관리를 사용하여 해결할 수 있는 문제점은 뭘까 ?

 

이 Vuex(상태 관리 패턴)을 사용하면, 대형 규모의 웹 어플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있으며 만약 Vuex를 사용하지 않는다면 일반적으로는 앱의 규모가 커지면서 생기는 문제점들은 다음과 같다.

 

• 일반적인 뷰의 컴포넌트 통신 방식은 props, emit 등인데 이 방식을 사용하면 할아버지에서 손자에게 데이터를 주고싶다면 중간에 거쳐야 할 컴포넌트가 정말 많아지는 문제점이 있다.
• 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어렵다.

 

이 두가지 사항을 더 상세히 쪼개서 여러개로 말할 수 있지만 일반적으론 위와 같이 두가지의 문제점이 발생한다. 이 발생한 문제점을 해결하기 위해 데이터를 중앙에서 관리할 수 있도록 Vuex가 도입되게 된다.

 

 

위의 이미지는 Vuex 공식 홈페이지에서 제공한 이미지인데 Vuex를 사용하면 다음과 같이 점선으로 이뤄진 부분이 Vuex로 구성 된다. 이제 해당 카테고리를 하나씩 알아보도록 하자.

 

 

State (데이터 객체)

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

 

 

Mutations (동기형 State 변경 처리기)

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

 

 

Actions (Mutation 트리거)

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

 

---

 

Vuex 데이터 전달 프로세스

Vuex 흐름 관계

위는 Vuex의 흐름 관계를 나타낸 이미지이니 추가로 참고하길 바란다.