data(), computed, methods

<template>
// 검색창
  <span class="search" :class="$mq">
    <input type="text" placeholder="검색어 입력하세요." v-model="kWord" @input.prevent="detectSearch" />
    <i class="fas fa-search" @click.prevent="onSearch"></i>
  </span>
  
// 메모 뿌려주는 부분
  <ul class="post-card" v-if="posts.length">
    <li
      v-for="post in posts"
      :key="`${post.id}${Math.random()}`"
      class="card-item"
      :class="$mq">
    </li>
  </ul>
</template>

코드 일부를 가져왔는데, 너무 길어서 설명에 필요없는 코드는 지웠다.

1. data()는 <template /> 안에서 사용할 변수를 가지고 있다.

  data() {
    return {
      kWord: "",
      keyword: ""
    };
  },

주로 method에서 이 값들을 가지고 연산한다.

 

2. computed는 화면이 그려지기 전에 미리 계산되어야하는 데이터를 가진다.

  computed: {
    posts() {
      return this.$store.state.post.posts;
    },
  },

즉, 변화에 따라 재연산이 필요한 데이터를 computed에 지정한다.

위 코드에선 메모를 불러와서 화면에 뿌리는데, posts는 작성된 메모들이 담긴 객체이다.

그리고 메모를 새로 작성할 때마다 이 객체에도 반영이되어 변경사항이 화면에 뿌려져야한다. ( 따로 호출해서 사용하지 않고 데이터 변화가 감지되면 그것을 알아서 반영한다.)

computed는 연산 결과를 Vuex에 저장해 두기 때문에 값을 매번 계산해서 가져오지 않고 저장된 값을 가져와 사용한다.

즉 posts 데이터에 값에 변화가 있을 때만 계산하고, 그렇지 않을 경우는 기존에 연산해둔 값을 반환해 준다.

 

2. method는 호출 시에 실행된다.

  methods: {
    onSearch() {
      return (this.keyword = this.kWord);
    },
    detectSearch: debounce(async function() {
      await this.onSearch();
      const res = await this.$store.dispatch("post/search", {
        userId: this.$store.state.user.me.id,
        keyword: encodeURIComponent(this.keyword)
      });
      if (this.keyword === "") {
        await this.$store.dispatch("post/loadPosts", {
          userId: this.$store.state.user.me.id,
          reset: true
        });
      }
      return;
    }, 50)
  },

 당연한 말이지만, methods는 호출 전엔 실행되지 않는다. 주로 data()에 있는 값을 가지고 연산한다.