[Vue3] Vue(5) 상태관리

❗❗  데브코스 45일차 (10.01)

밀리고 밀리다 한 달 만에 다시 이어서 작성하는 Vue 강의...

5일차에는 Vue의 상태 관리 개념을 익힌다.

같은 레벨의 컴포넌트에서의 여러 단계의 props 전달과, 중앙 상태 관리인 Vuex에 대해 다뤄 볼 것이다.

 

✅ Provide / Inject

일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야 할 때 props를 사용한다.
상위에서 하위의 deth가 깊어지면 지속적으로 props를 사용해서 전달해야 할까?
ex) root -> parent -> child1 -> child2 ->.... child5의 컴포넌트 구조가 있을 때,
root에서 child5로 데이터를 넘긴다면 수많은 컴포넌트에서 props가 타고 타고 내려갈 것이다.
같은 계층에서 이러한 경우 provide와 inject 쌍을 사용할 수 있다.

 

 

코드 예시

root.vue

<template>
  <h1>{{ msg }}</h1>
  <Parent></Parent>
</template>

<script>
import Parent from '~/components/Parent'
import { computed } from 'vue'

export default {
  components: {
    Parent,
  },
  provide() {
    return {
      msg: computed(() => this.msg)
    }
  },
  data() {
    return {
      msg: 'Hello Vue!',
    }
  },
}
</script>

child5.vue

<template>
  <h2>Child!! / {{ msg.value }}</h2>
</template>

<script>
export default {
  inject: ['msg']
}
</script>

위 코드를 보면 root에서 provide를 선언해 주고
하위 컴포넌트로 가다가 사용하는 곳에서 inject로 사용하면 된다.
provide에서 computed 함수로 묶어주는 이유는 반응성을 위해서이다! (msg 값이 바뀔 때마다 이를 인식한다.)

 

✅ Vuex

위의 경우는 같은 컴포넌트 단계에 속 할 경우 사용된다. 만약 컴포넌트가 무수히 많아지고 같은 단계가 아니라 여러 단계가 있고 각각 다른 단계에서 데이터를 컨트롤 해야한다면 위의 방법에도 한계가 있다.

이를 위해 중앙에서 상태를 관리하는 개념이 도입이 되었다.

Vuex는 상태 관리 패턴 + 라이브러리로 중앙 집중식 저장소 역할을 한다.

Vuex를 학습하기 위해서는 다음의 그림을 잘 이해해야한다.

store.js

import { createStore } from "vuex"

export default createStore({
  //필요한 데이터들의 상태를 저장
  state() {
    return {
      movieList: [],
    }
  },
  
  //getter
  getters: {},
  
  //state상태를 바꾸는 핸들러
  //외부에서 상태를 바꾸는 핸들러를 직접 호출 할 수 없다.
  mutations: {
    movieListState(state, payload) {
      if (payload.movieList) {
        const newlist = payload.movieList
        state.movieList = [...state.movieList, ...newlist]
      } else {
        state.movieList = []
      }
  },
  
  //따라서 actions에서 mutations를 commit으로 호출해서 사용한다.
  actions: {
    async getApi({ commit }, options) {
    	//ex) api호출 로직
        const data = await fetch(~~~)
        commit('movieListState', {data})
      }
    },
  },
}

main.js

store 사용예시

computed: {
    movieList() {
      return this.$store.state.store.movieList
    }
  },
create(){
 this.$store.dispatch('store/getApi')
}

store개념이 다소 많기 때문에 공식 문서를 읽어보는 것이 훨씬 좋을 것이다.

간략하게만 어떻게 선언하고 어떻게 사용하는지만 적어봤다.

 

 

👨‍💻 store 개념을 react 학습 당시에도 Redux라는 녀석으로 접해본 적이 있었다. 그때는 아무리 보고 사용해 봐도 전혀 이해가 가지 않아서 당시에 학습을 멈췄던 적이 있었다. 그러다 이번에 Vuex에서 다시 그 개념을 학습하고 사용해 봤는데 바로바로 이해가 됐고, 쉽게 사용할 수 있었다. 다음에 Redux를 학습하게 되면 쉽게 이해할 수 있을 것 같았다.

 

📖 학습한 내용

• Vue(5)
  
  • 플러그인
  • 믹스인
  • Teleport
  • Provide, Inject
  • Vuex(Store)

 

 

📃 참고 사이트
https://v3.ko.vuejs.org/guide/component-provide-inject.html#%E1%84%87%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%B3%E1%86%BC%E1%84%92%E1%85%A7%E1%86%BC-reactive-%E1%84%8B%E1%85%B3%E1%84%85%E1%85%A9-%E1%84%8C%E1%85%A1%E1%86%A8%E1%84%8B%E1%85%A5%E1%86%B8%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5
https://vuex.vuejs.org/kr/