[Vue.js] mitt 을 사용하여 멀리 떨어진 Component 간 데이터 전송하기

💡 실습 포인트!

• 이전에 필터 선택하면 적용이 되게 하는 기능을 깜빡하고 만들지 않았다고 했는데 마침... 오늘 공부해서 적용까지 해보았다.
• 처음 기능 만들고 여러번 실행해보니, 필터 선택 페이지에서 아직 필터를 선택하지도 았았는데 이전에 선택했던 필터가 기본으로 선택된 것을 보고 코드를 추가로 수정해주었다.
• 이번에는 캡처하려고 여러번 실행해보니, 필터가 선택된 상태에서 필터 선택 페이지나 글 작성 페이지에서 "Cancel" 버튼을 눌러도 다음번 이미지 업로드할 때 필터가 선택되어 있어 코드를 추가 수정해주었다.

---

💜 mitt 라이브러리 사용하기

• 가끔 멀리 떨어져있는 Component 로 데이터 전송을 해야 할 경우가 생긴다.
• 예를 들어, 나의 경우 App.vue > Container.vue > FilterBox.vue 순으로 Component 포함관계가 있을 때 FilterBox.vue 에서 App.vue 로의 데이터 전송이 필요했다. 
• 이런 상황에서 custom event 로 데이터 전송을 해주기에는 2번의 데이터 전송 과정(FilterBox -> Container, Container -> App)을 거쳐야 하므로 코드가 길어지고 복잡해진다.
• 그러므로, mitt 라는 외부 라이브러리를 사용하면 보다 쉽게 데이터 전송이 가능하다.
  (Vue 2 버전에서는 EventBus 라는 것을 사용하면 되지만 Vue 3 에서는 사용이 아직 불가하므로 외부 라이브러리를 설치하는 것!)

🤍 mitt 설치하기

// npm 을 이용하는 경우
npm install mitt

// yarn 을 이용하는 경우
yarn add mitt

• 터미널에 위 두 코드 중 하나를 입력하여 mitt 라이브러리를 설치하면 된다.

---

🤍 mitt 셋팅하기

import { createApp } from 'vue'
import App from './App.vue'

// mitt 라이브러리 셋팅
import mitt from 'mitt'
let emitter = mitt();
let app = createApp(App);
app.config.globalProperties.emitter = emitter;

app.mount('#app')

• mitt 셋팅은 위와 같이 main.js 파일의 코드를 추가 및 수정해주면 된다.
• 참고로 app.config.globalProperties 는 모든 Component 에서 사용할 수 있는 변수를 등록할 수 있게 도와주는 일종의 object 자료인데, 쉽게 글로벌 변수 보관함이라고 생각하면 된다.
• 이런식으로 자주 쓰는 axios 같은 것도 보관하면, 각 vue 파일에서 axios 를 import 해오지 않더라도 axios 를 사용할 수 있으므로 편리하다.
  (다만, 기존에 axios.get 과 같이 코드를 작성했다면, 이 방식을 사용할 때에는 this.axios.get 과 같이 코드를 작성해주어야 한다.)

---

🤍 mitt 사용하기

this.emitter.emit('전송할_때_사용할_이름', '전송할_데이터')

• 데이터를 전송하고자 하는 곳에서 위와 같이 코드를 작성하면 전송이 가능하다.

 

this.emitter.on('전송할_때_사용한_이름', (data)=>{
  // 데이터 수신했을 때 실행할 코드 작성
  // 전송받은 데이터는 원하는 이름의 파라미터로 받아 출력해보면 된다.
})

• 이제 데이터를 수신하고자 하는 곳에서 위와 같이 코드를 작성하면 수신이 가능하다.
• 일반적으로 수신하는 코드는 mounted() 안에 작성한다.

---

💜 필터 적용 페이지에서 선택한 필터를 업로드할 이미지와 발행한 포스트 이미지에 적용하기

• 필터 적용 페이지에서 사용자가 하단의 미리 필터가 적용되어 보여지는 작은 이미지들(보라색 표시) 중 하나를 클릭하면 상단의 이미지(빨간색 표시)에 사용자가 선택한 필터가 적용될 수 있어야 했다.
• 또한 다음 페이지인 글 작성 페이지의 이미지에도, "발행" 버튼을 누른 후 새로 업로드되는 포스트의 이미지에도 필터가 당연히 적용되어 있어야 했다.

 

🤍 FilterBox.vue 에서 App.vue 로 선택한 필터명 전송하기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="item" @click="fire">
    <div class="slot">
      <slot></slot>
    </div>
    <div
      class="filter-item"
      :class="filter"
      :style="`background-image: url(${imgUrl})`"
    ></div>
  </div>
</template>

<script>
export default {
  name: "FilterBox",
  data() {
    return {};
  },
  props: {
    imgUrl: String,
    filter: String,
  },
  methods: {
    fire() {
      this.emitter.emit("filterName", this.filter);
    },
  },
};
</script>

<style>
</style>

• 그래서 FilterBox.vue 에서 item 이라는 class 를 가진 <div> 영역을 클릭하면, 이 영역에 적용되어있는 filter 이름이 App.vue 로 전송되도록 해주었다.
• 이 때, 태그 자체에 코드를 작성하기에는 내용이 길기 때문에 methods 에 fire() 함수를 따로 만들어서 @click 속성으로 넣어주었다.
• fire() 함수의 코드를 해석하자면 사용자가 클릭한 filter-item 이라는 class 를 가진 <div> 의 데이터바인딩된 class 인 filter 를 filterName 이라는 이름으로 데이터 전송해달라는 것이다.
  (data 보관함의 항목이나 props 의 항목을 methods 에서 사용할 때는 꼭 this 를 붙여주어야 한다.) 

---

🤍 App.vue 에서  FilterBox.vue 로부터 전송받은 데이터 수신하기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="header">
    <ul class="header-button-left">
      <li v-if="step === 1 || step === 2" @click="step = 0; filter = ''">Cancel</li>
    </ul>
    <ul class="header-button-right">
      <li @click="step++" v-if="step === 1">Next</li>
      <li @click="publish" v-if="step === 2">발행</li>
    </ul>
    <img src="./assets/logo.png" class="logo" />
  </div>

  <Container
    :posts="posts"
    :step="step"
    :imgUrl="imgUrl"
    :filter="filter"
    @content="content = $event"
  />

  <button class="btn" @click="more" v-if="step === 0">더보기</button>

  <div class="footer" v-if="step === 0">
    <ul class="footer-button-plus">
      <input @change="uploadImg" type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>
</template>

<script>
import Container from "./components/Container.vue";
import posts from "./assets/posts";
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      posts: posts,
      moreCnt: 0,
      step: 0,
      imgUrl: "",
      content: "",
      filter: "",
    };
  },
  methods: {
    more() {
      axios
        .get(`https://codingapple1.github.io/vue/more${this.moreCnt}.json`)
        .then((result) => {
          this.posts.push(result.data);
          this.moreCnt++;
        })
        .catch(() => {
          console.log("GET 요청을 실패했습니다.");
        });
    },
    uploadImg(e) {
      let file = e.target.files;
      let url = URL.createObjectURL(file[0]);
      this.imgUrl = url;
      this.step++;
    },
    publish() {
      let myPost = {
        name: "Bak Seoyun",
        userImage: "https://placeimg.com/100/100/arch",
        postImage: this.imgUrl,
        likes: 28,
        date: "Jun 1",
        liked: false,
        content: this.content,
        filter: this.filter,
      };
      this.posts.unshift(myPost);
      this.step = 0;
      this.filter = "";
    },
  },
  components: {
    Container: Container,
  },
  mounted() {
    this.emitter.on("filterName", (a) => {
      this.filter = a;
    });
  },
};
</script>

<style>
</style>

• App.vue 의 mounted() 안에 FilterBox.vue 에서 전송한 데이터를 위와 같이 코드를 작성하여 수신해주었다. 
• 코드를 해석하자면 filterName 이라는 이름으로 받아온 데이터를 App.vue 의 filter 에 적용해달라는 것이다.
• 그리고 이렇게 적용된 filter 를 publish() 함수의 filter 항목에 적용해주면, fiilter 항목에 사용자가 선택한 필터 이름이 작성된 채로 포스트가 발행된다.
  (헷갈리지 말아야 할 것은 여기에 적용한다고 발행된 포스트 이미지에 filter 가 적용되는 것은 아니고, 이 작업을 해두어야 Post.vue 에서 반복문을 돌 때 post 의 class 에 작성된 filter 를 추가할 수 있다.)
• 그리고 publish() 함수 마지막에 this.filter ="" 라는 코드를 추가하여 발행된 이후에는 선택된 filter 가 없도록 초기화해주었다.
  (이 코드를 작성하지 않으면, 그 다음번에 이미지를 업로드할 때 아직 업로드할 이미지의 필터를 선택하지도 않았는데 이전에 선택했던 필터가 적용되어 있는 것을 발견하게 된다.)
• 필터가 선택된 상태에서 "Cancel" 버튼을 누른 다음, 다시 이미지를 업로드하려고 하면 그 전에 선택했던 필터가 적용되어 있길래 이 경우에도 선택된 filter 가 없도록 초기화하는 코드를 추가해주었다. 

---

🤍 App.vue 에서 Container.vue 로 filter 전송하여 이미지에 필터 적용하기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div>
    <div v-if="step === 0">
      <Post :post="post" v-for="(post, i) in posts" :key="i" />
    </div>

    <!-- 필터선택페이지 -->
    <div v-if="step === 1">
      <div
        class="upload-image"
        :class="filter"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="filters">
        <FilterBox
          :filter="filter"
          :imgUrl="imgUrl"
          v-for="(filter, i) in filters"
          :key="i"
          >{{ filter }}</FilterBox
        >
      </div>
    </div>

    <!-- 글작성페이지 -->
    <div v-if="step === 2">
      <div
        class="upload-image"
        :class="filter"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="write">
        <textarea
          class="write-box"
          @input="$emit('content', $event.target.value)"
          placeholder="내용을 입력하세요!"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import Post from "./Post.vue";
import FilterBox from "./FilterBox.vue";

export default {
  name: "Container",
  data() {
    return {
      filters: [
        "aden",
        "_1977",
        "brannan",
        "brooklyn",
        "clarendon",
        "earlybird",
        "gingham",
        "hudson",
        "inkwell",
        "kelvin",
        "lark",
        "lofi",
        "maven",
        "mayfair",
        "moon",
        "nashville",
        "perpetua",
        "reyes",
        "rise",
        "slumber",
        "stinson",
        "toaster",
        "valencia",
        "walden",
        "willow",
        "xpro2",
      ],
    };
  },
  components: {
    Post,
    FilterBox,
  },
  props: {
    posts: Array,
    step: Number,
    imgUrl: String,
    filter: String,
  },
};
</script>

<style>
</style>

• 필터 선택 페이지와 글 작성 페이지에도 당연히 선택한 필터가 이미지에 적용이 되어야 하기에 콜론( : )을 사용하여 class 속성에 filter 를 데이터바인딩하여 넣어주었다.

---

🤍 Post.vue 를 통해 각 post 의 이미지에 filter 적용하기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="post">
    <div class="post-header">
      <div
        class="profile"
        :style="{ backgroundImage: `url(${post.userImage})` }"
      ></div>
      <span class="profile-name">{{ post.name }}</span>
    </div>
    <div
      class="post-body"
      :class="post.filter"
      :style="{
        backgroundImage: `url(${post.postImage})`,
      }"
    ></div>
    <div class="post-content">
      <p>{{ post.likes }} Likes</p>
      <p>
        <strong>{{ post.name }}</strong> {{ post.content }}
      </p>
      <p class="date">{{ post.date }}</p>
    </div>
  </div>
</template>

<script>
</style>

• postImage 가 적용되는 post-body 라는 class 를 가진 <div> 에 class 를 하나 더 추가하여 post.filter 를 데이터바인딩해주었다.
• 이 작업을 통해 이제 각 posts 데이터에 포함된 filter 항목들이 실제로 이미지에 적용이 된다.