[DAY-39] Vue (6)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
Vuex 되게 편리하네요.
데이터들을 컴포넌트 내부에서 선언하지 않고
전역적으로 쓰이는 데이터들을 한번에 묶어 관리할 수 있다니.
게다가 모듈화도 가능하다니..!

[1] 플러그인

플러그인을 작성함으로써 Vue에 전역 기능을 만들어서 사용할 수 있습니다.

export default {
	install: (app, options) => {
		// 플러그인의 내부 내용은 install 메소드 내부에 작성합니다.
	});
}

// fetch 플러그인을 만듭니다.
// $fetch와 같이 $가 붙는 경우는 this로 접근해서 사용할 수 있다는 Vue의 통상적인 의미입니다.
export default {
  install(app, component) {
    app.config.globalProperties[options.pluginName || "$fetch"] = (
      url,
      opts
    ) => {
      return fetch(url, opts).then((res) => res.json());
    };
  },
};

import { createApp } from "vue";
import App from "./App.vue";
import fetchPlugin from "~/plugins/fetch";

const app = createApp(App);
app.use(fetchPlugin. {
	pluginName: '$myname'
});
// use로 사용해서 등록합니다.
// 특정 이름을 지정할 수 있습니다.
app.mount("#app");

methods: {
	async init() {
		const res = await this.$myname('url');
		console.log(res);
	}
}

[2] 믹스인

믹스인으로 Vue 컴포넌트에 재사용 가능한 기능을 만들어서 사용할 수 있습니다.

믹스인은 하나의 컴포넌트와 유사한 구조를 작성할 수 있습니다.

mixins: [myMixins]; // 믹스인의 이름을 props와 동일한 형태로 불러와 사용합니다.

같은 이름의 훅 함수(라이프사이클)는 모두 호출될 수 있게 배열에 병합됩니다.

또한 methods, data 등도 함께 사용할 수 있게 적절하게 병합됩니다.

하지만 만약 믹스인 내 옵션들과 컴포넌트의 옵션들이 중복될 경우, 컴포넌트의 옵션이 우선되어 적용됩니다. (훅 함수 제외)

// sampleMixin

export default {
  data() {
    return {
      count: 1,
      mag: "HI~",
    };
  },
};

// App.vue

import Hello from "~/components/Hello";
import sampleMixin from "~/mixins/sample";

export default {
  components: {
    Hello,
  },
  mixins: [sampleMixin],
  data() {
    return {
      msg: "Hello Vue!",
    };
  },
};

{{ msg }}를 출력했을 때, 컴포넌트의 msg가 출력되는 것을 확인할 수 있습니다.

[+] 동적 컴포넌트 + 믹스인 예제

비슷한 데이터 형식을 렌더링하는 두 개의 컴포넌트를 동적 컴포넌트의 개념으로 묶은 후,

믹스인으로 해당 컴포넌트들의 props들을 정의해줄 수 있습니다.

// App.vue
<template>
  <component
    :is="field.component"
    v-for="field in fields"
    :key="'component-' + field.title"
    v-model="field.value"
    :title="field.title"
    :items="field.items"
  />

  <h1>결과</h1>
  <div v-for="field in fields" :key="'result-' + field.title">
    {{ field.value }}
  </div>

  <button @click="submit">제출</button>
</template>

<script>
import * as FieldComponents from "~/components/fields/index";

export default {
  components: {
    ...FieldComponents,
  },
  data() {
    return {
      fields: [
        {
          component: "TextField",
          title: "이름",
          value: "",
        },
        {
          component: "SimpleRadio",
          title: "나이대",
          value: "",
          items: ["20대", "30대", "40대", "50대"],
        },
      ],
    };
  },
  methods: {
    submit() {
      const results = this.fields.map(({ title, value }) => ({
        title,
        value,
      }));
      console.log(results);
    },
  },
};
</script>

// index.js - 이렇게 import를 묶어서 사용하면 컴포넌트가 많아질 경우에도 코드가 깔끔합니다.
export { default as TextField } from "./TextField";
export { default as SimpleRadio } from "./SimpleRadio";

// mixin.js
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    modelValue: {
      type: String,
      default: "",
    },
  },
  emits: ["update:modelValue"],
};

// SimpleRadio.vue
<template>
  <h3>{{ title }}</h3>
  <ul>
    <li v-for="item in items" :key="item">
      <label>
        <input
          type="radio"
          :value="item"
          :name="title"
          @input="$emit('update:modelValue', $event.target.value)"
        />
        {{ item }}
      </label>
    </li>
  </ul>
</template>

<script>
import fieldMixin from "./mixin";

export default {
  mixins: [fieldMixin],
};
</script>

// TextField.vue
<template>
  <div>
    <h3>{{ title }}</h3>
    <input
      :value="modelValue"
      type="text"
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

<script>
import fieldMixin from "./mixin";

export default {
  mixins: [fieldMixin],
};
</script>

[3] Teleport

teleport 태그를 사용하여 컴포넌트 요소를 순간이동 시킬 수 있습니다.

<template>
  <div @click="onModal">
    <slot name="activator"></slot>
  </div>
  <teleport to="body">
    <!-- 하단의 요소들을 body 태그 내부로 순간이동 시킵니다. -->
    <template v-if="isShow">
      <div class="modal" @click="offModal">
        <div
          :style="{ width: `${parseInt(width, 10)}px` }"
          class="modal__inner"
          @click.stop
        >
          <slot></slot>
        </div>
      </div>
    </template>
  </teleport>
</template>

fixed 등 상위 요소의 스타일 영향을 받는 요소들을 최상단으로 이동시킬 때, 원하는 별도의 요소로 이동하기 원할 때 등 유용하게 사용할 수 있습니다.

[+] @click.stop

해당 코드에서는 이벤트 버블링이 일어나 modal__inner클래스를 가진 div를 클릭해도 offModal 함수가 실행됩니다.

<template v-if="isShow">
  <div class="modal" @click="offModal">
    <div class="modal__inner">
      <slot></slot>
    </div>
  </div>
</template>

이때, modal__inner 클래스를 가진 div에 @click.stop 속성을 넣어주어 이벤트 전파를 막을 수 있습니다.

<template v-if="isShow">
  <div class="modal" @click="offModal">
    <div class="modal__inner" @click.stop>
      <slot></slot>
    </div>
  </div>
</template>

배운 내용을 잊지 맙시다! 😈

[4] Provide, Inject

일반적으로 데이터를 부모에서 자식 컴포넌트에 전달할 때 props를 사용합니다.

하지만 이는 부모 컴포넌트와 자식 컴포넌트 사이의 데이터를 전달할 뿐, 조상 컴포넌트에서 바로 맨 하위 컴포넌트에 데이터를 전달해줄 수 없습니다.

물론 props를 그 사이에 있는 컴포넌트에 전부 정의하면 가능하지만 매우 번거로운 작업입니다.

이때 Provide와 Inject쌍을 사용해서 데이터를 전달할 수 있습니다.

// App.vue
export default {
  components: {
    Parent,
  },
  provide() {
    return {
      msg: this.msg, // data 옵션 위쪽에 provide 옵션으로 데이터를 후손 요소들에게 보내줍니다.
    };
  },
  data() {
    return {
      msg: "App Vue!",
    };
  },
};

// Child.vue
<template>
  <h1>Child {{ msg }}</h1>
</template>

<script>
export default {
  inject: ["msg"], // inject로 조상 요소에서 보내준 데이터를 받습니다.
};
</script>

하지만 provide와 inject를 사용해서 전달된 데이터는 반응형 데이터가 아닙니다.

[4-1] computed

computed는 계산된 데이터를 만들 때 사용할 수 있는 옵션입니다.

이를 함수 형태로 불러와서 사용하게 되면, 옵션이 아닌 하나의 함수로써 원하는 부분에서 계산된 데이터를 만들어줄 수 있습니다.

// App.vue
import Parent from "~/components/Parent";
import { computed } from "vue";

export default {
  components: {
    Parent,
  },
  provide() {
    return {
      msg: computed(() => this.msg),
      // computed 함수 내부에 하나의 콜백을 생성해서 계산된 값을 반환합니다.
    };
  },
  data() {
    return {
      msg: "App Vue!",
    };
  },
};

// Child.vue
<template>
  <h1>Child {{ msg.value }}</h1>
</template>

하지만 이 computed함수를 사용하게 되면 반환값이 원래의 데이터 형식이 아닙니다.

바로 객체 형태로 반환이 됩니다.

따라서 계산된 데이터를 직접 꺼내 사용하기 위해 .value를 꼭 붙여 사용해야 합니다.

이는 Vuex를 사용하면 전부 해결될 문제입니다. 😆

[5] Vuex(Store)

여러 컴포넌트에서 동시에 사용되는 데이터는 별도의 파일에 저장해서 전역으로 활용할 수 있습니다.

// store/index.js
import { reactive } from "vue"; // 반응형 데이터를 제공해주는 vue 내장 함수입니다.

export const state = reactive({
  msg: "Hello vue",
  count: 1,
});

export const getters = {
  // computed(계산된 데이터) 로직
  reversedMsg() {
    return state.msg.split("").reverse().join("");
  },
};

export const mutations = {
  // 데이터를 변경하는 로직
  increaseCount() {
    state.count += 1;
  },
  decreaseCount() {
    state.count -= 1;
  },
  updateMsg(newMsg) {
    state.msg = newMsg;
  },
};

export const actions = {
  // 기타 로직
  async fetchTodo() {
    const fetchResult = await fetch(
      "https://jsonplaceholder.typicode.com/todos/1"
    ).then((res) => res.json());

    mutations.updateMsg(fetchResult.title);
  },
};

이렇게 별도의 파일로 관리하게 되면 다양한 컴포넌트에서 데이터를 사용할 수 있으며

해당 데이터의 관리가 쉬워집니다.

이러한 데이터 관리 로직을 조금 더 쉽게 해줄 수 있는 라이브러리가 바로 Vuex입니다.

Vuex는 상태 관리 페턴 라이브러리입니다.

Vue 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하게 됩니다.

vuex는 다음 명령어로 설치할 수 있습니다.

npm i vuex@next // next 버전으로 설치합니다. (4.0 이상)

// store/index.js
import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      msg: "store data",
      count: 1,
    };
  },
  getters: {
    reverseMsg(state) {
      return state.msg.split("").reverse().join("");
    },
  },
  mutations: {
    increaseCount(state) {
      state.count += 1;
    },
    updateMsg(state, newMsg) {
      state.msg = newMsg;
    },
  },
  actions: {
    // context =>  state, getters, commit(mutations), dispatch
    async fetchTodo({ commit }) {
      const todo = await fetch(
        "https://jsonplaceholder.typicode.com/todos/1"
      ).then((res) => res.json());

      commit("updateMsg", todo.title);
    },
  },
});

여기서 context 객체로 옵션 안에서 다른 옵션으로 접근할 수 있습니다.

context는 state, getters, commit(mutations), 그 외인 dispatch를 제공합니다.

// main.js
const app = createApp(App);
app.use(store); // 등록해서 사용합니다.
app.mount("#app");

// Hello.vue
export default {
  computed: {
    msg() {
      return this.$store.state.msg; // $store으로 접근할 수 있습니다.
    },
    count() {
      return this.$store.state.count;
    },
  },
};

[5-1] 모듈화

vuex의 데이터나 여러 옵션들에 접근하기 위해 this.$store. ... 의 형식으로 접근합니다.

하지만 데이터의 양, 또는 여러 옵션 내부 값들이 많아질수록 store/index.js 파일 하나에서 모든 데이터들을 관리하기 힘듭니다.

따라서 vuex는 store을 기능별로 쪼개서 제공하는 모듈화를 제공합니다.

그림과 같이 store 내부에서 분리한 js 파일을 index.js 파일 안에 모듈화해서 불러와 사용할 수 있습니다.

// message.js
export default {
  namespaced: true, // 해당하는 이름 범위(message)로 데이터들을 사용할 수 있는 옵션
  state() {
    return {
      message: "hello Store Module",
    };
  },
  getters: {
    reversedMessage(state) {
      return state.message.split("").reverse().join("");
    },
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
  actions: {
    async fetchTodo({ commit }) {
      const todo = await fetch(
        "https://jsonplaceholder.typicode.com/todos/1"
      ).then((res) => res.json());

      commit("updateMessage", todo.title);
    },
  },
};

// index.js
export default createStore({
  state() {
	...

	},
	modules: { // modules 옵션 내부에서 불러와 사용합니다.
		message
	}
}

// Hello.vue
export default {
  computed: {
    msg() {
      return this.$store.state.msg;
    },
    count() {
      return this.$store.state.count;
    },
    storeMessage() {
      return this.$store.state.message.message;
      // 모듈의 이름, 해당 상태의 이름도 명시해줘야 합니다.
    },
  },
  methods: {
    increaseCount() {
      this.$store.commit("count/increaseCount");
    },
  },
};

[5-2] map~

vuex의 내장 함수 mapState, mapGetters, mapMutations, mapActions를 활용할 수 있습니다.

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  computed: {
    ...mapState("count", ["count"]),
    ...mapState("message", ["message"]),
  },
};

/* 
	1. 모듈에서 상태 가져오기
		...mapState('모듈화 된 파일 이름', ['가져올 상태 1', '가져올 상태 2'])
	2. 모듈화 된 파일 이름이 없을 경우 (index.js인 경우) 
		...mapState(['가져올 상태1', '가져올 상태2']);
*/

---

출처

프로그래머스

Vue.js3 Document