[Udemy Vue 완벽가이드 Section15] 212. 개념 및 사용 목적

# What is "Vuex"? Vuex란 무엇일까?

→ Vuex is a library for managing global state

- Vuex는 전역 상태(Global state)를 관리하기 위한 라이브러리.

 

 

# State(상태)는 무엇인가?

- 상태는 데이터로 번역될 수 있다. 애플리케이션이 필요로 하고, 사용자가 화면에서 무엇을 보는지에 영향을 주는 데이터.

- 상태란 일종의 반응형 데이터라고 볼 수 있다. 변경될 수 있으며, 변경함으로써 화면상의 무언가를 트리거하는 데이터.

Vue.js는 이러한 반응성과 관련이 깊다.

 

하지만 앱의 다양한 컴포넌트에 영향을 주는 데이터, 즉 상태를 관리하는 건 어려울 수 있다.

따라서 두 주요 상태인 지역 상태(local state)와 전역 상태를 구분하는게 아주 중요하다.

 

1/ 지역 상태(local state)

지역 상태는 하나의 컴포넌트 내부에서 관리되는 데이터, 상태.

- Affects one component

해당 컴포넌트에만 영향을 주며, props를 통해 간접적으로 자식 컴포넌트에도 영향을 준다.

 

- e.g. entered user input, show/hide container

입력 요소에 입력된 사용자 입력값이나 어떠한 컨테이너를 표시하거나, 숨기는 버튼을 예로 들 수 있다.

 

 

## 지역 상태(local state) 예시

AddResources 컴포넌트가 있고, 그 안에 사용자 입력을 가져오는 양식이 있다.

그 사용자 입력이나 전체 양식의 유효성은 이 컴포넌트에서만 의미가 있다.

 

보면 inputIsInvalid라는 data 프로퍼티가 있다.

이게 바로 해당 컴포넌트에서 이 dialog를 띄울지 말지에 영향을 주는 상태이다.

<template>
  <base-dialog
    v-if="inputIsInvalid" //이 inputIsInvalid값에 따라 dialog여부
    title="Invalid Input"
    @close="confirmError"
  >
    <template #default>
      <p>Unfortunately, at lease one input value is invalid.</p>
      <p>Please make sure a few characters..</p>
    </template>
    <template #actions>
      <base-button @click="confirmError">Okay</base-button>
    </template>
  </base-dialog>
</template>
<script>
import BaseButton from '../UI/BaseButton.vue';
export default {
  // 생략
  data() {
    return {
      inputIsInvalid: false,
    };
  },
  // 생략
};
</script>

이 inputIsInvalid 데이터는 state(상태)이다.

사용자가 화면에서 무엇을 보는지, 즉 dialog를 띄울지 말지에 영향을 주기 때문.

이 컴포넌트에서만 의미를 갖는다. 따라서 컴포넌트 내부에서 관리된다.

이게 바로 local state, 즉 지역 상태의 예시.

 

 

2/ 전역 상태(Global State)

- Affects multiple components/entire app

전역 상태는 여러 컴포넌트 혹은 앱 전체에 걸쳐 영향을 주는 데이터, 상태이다.

다양한 위치에서 필요로 하는 데이터.

 

- E.g. user auth status, shopping cart items

예를 들면, 사용자의 로그인 여부를 알리는 사용자 인증 상태 (user auth status),

또는 앱의 다른 부분에서도 표시될 수 있는 장바구니 항목 등.

 

## 전역 상태(global state) 예시

TheResources.vue 파일을 한번 보자.

보면 data에 storedResources가 있고, 해당 리소스들은 addResources 메서드를 통해 변경된다.

그런데 이 메서드는 다른 컴포넌트인 AddResources.vue 내부에서 트리거된다.

그리고 storedResources 데이터는 다른 컴포넌트인 StoredResources.vue에서도 사용된다.

즉, storedResources 데이터는 앱 전체 또는 다중 컴포넌트에 영향을 주는 state인거다.

여러 컴포넌트에 걸쳐서 사용되는 데이터이다.

Vuex는 이 전역 상태에 관한 도움을 제공한다.

여기서는 provide와 inject를 통해 이 상태를 관리하고 있다.

이렇게 해도 작동되고 나쁘다고는 할 수 없지만, 문제가 될 수도 있는 몇 가지 단점이 있다.

잠재적인 단점을 하나 예로 들어보자.

 

## provide/inject 단점

모든 데이터와 데이터를 변경하는 모든 메서드를 하나의 컴포넌트에 넣어야 한다는 것.

위 예시에서는 TheResources.vue 컴포넌트에 resources 데이터와 이 데이터를 변경하는 addResouces 메서드가 있다.

 

그러면 TheResources.vue 컴포넌트는 덩치가 더 커질 것이고, 이 컴포넌트의 템플릿에는 필요하지 않지만, 다른 컴포넌트에서는 필요할 수 있는 데이터와 메서드들을 많이 가지게 될 것이다.

 

이렇게 하나의 커다란 컴포넌트에서 컴포넌트 상태를 전부 관리하면, 애플리케이션이 커짐에 따라 관리해줄 전역 상태도 늘어나면서 유지관리가 어려워질 수 있다.

 

게다가 provide와 inject는 반응성과 관련된 복잡한 문제를 일으킬 수도 있다.

결국 Vuex가 최고의 선택이 된다.

 

 

# Why Vuex? 왜 Vuex가 좋은 솔루션인걸까?

 

Managing app-wide/global state can be difficult.

앱 전체 또는 전역 상태 관리는 어려울 수 있다.

 

1/ "Fat Components"

- App.vue(or similar components) contain lots of data and logic.

다른 컴포넌트엔 필요하더라도, 해당 컴포넌트 템플릿엔 필요도 없는 많은 로직이 포함된 거대한 컴포넌트가 만들어질수도 있다.

 

2/ Unpredictable

- It's not always obvious where data(state) gets changed in which way.

예측할 수 없는 동작이 애플리케이션에 일어날 수도 있다.

어디서 상태가 변경되는지 즉시 눈에 띄게 나타나지 않거나, 원하지 않는 방향으로 상태가 변경되어 버릴지도 모른다.

 

3/ Error-prone

- Accidental or missed state updates are possible.

실수로 상태 업데이트가 발생하거나 누락될 수도 있으니 오류도 자주 난다.

 

리소스를 inject하는 컴포넌트에서는 TheResources.vue에서 관리하는 리소스 배열을 가져온다.

이론적으로는 이 배열을 inject된 위치에서 편집할 수 있다.

메모리에서도 같은 배열을 편집할 수 있다.

여기서 실수해서 혹은 동료가 코드 작업을 대충 해서 일이 생길 수도 있다.

예측이 어렵고 오류가 잦다는게 이런 뜻이다.

편집하면 안되는 위치에서 data를 편집해버릴 수도 있다는 것.

혼자서만 작업한다면 괜찮겠지만, 더 큰 팀에서 수행하는 더 큰 프로젝트라면 문제가 될 수 있다.

 

 

 

Vuex가 바로 이런 부분을 도와준다.

 

1/ Outsourced state management

상태 관리를 Vuex에 아웃소싱 하기 때문.

엄청나게 큰 컴포넌트도 생기지 않는다. 이는 컴포넌트와 분리되어 별도로 위치하니깐.

 

2/ Predictable state management/flow

Vuex에는 상태가 어디서 관리되어야 하고, 어떻게 업데이트 및 공유되어야 하는지에 대한 명확한 규칙이 있다.

 

3/ Clearly defined data flow: Less errors

그러니 오류가 덜 발생한다. 지켜야 할 규칙이 명확히 정의된 data flow가 있으므로.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.