[Vue.js] Vuex2: 좋아요 & 좋아요 취소 & 좋아요 여부 표시 기능 만들기

💡 실습 포인트!

• 이번에는 좋아요 & 좋아요 취소 기능과 좋아요 여부를 표시하는 기능을 만들어보았다.
• 하나의 포스트에만 데이터바인딩을 하는 것은 쉬웠는데 기존 데이터로 만든 포스트들에서 독립적으로 동작하도록 만드는 과정에서 한번, "더보기" 버튼을 통해 추가로 가져온 포스트에서도 동작하도록 만드는 과정에서 또 한번, 사용자가 새로 작성한 포스트에서도 정상적으로 동작하도록 만들기 위해 고민하고 이것저것 적용해보느라 꽤 오랜 시간이 걸렸다.
  (사실 코딩보다 항상 블로그 작성이 더 오래 걸린다...ㅎㅎ)
• 최종적으로 기존에 구현한 기능들도 문제 없는지 확인까지 완료하고서야 기능 만들기를 종료했다.

 

💜 독립적인 기능 작동 확인하기

• 일부러 위 포스트의 LIkes 가 아래 포스트와 독립적으로 작동하는지 보여주기 위해 각 포스트의 Likes 가 보이도록 GIF 캡처를 했다.
• 사진을 한 번 클릭시 +1, 한 번 더 클릭하면 -1 이 되는 것을 확인할 수 있다.

---

💜 "더보기" 버튼으로 가져온 포스트의 기능 작동 확인하기

• 이 경우에도, 일부러 위 포스트의 LIkes 가 아래 포스트와 독립적으로 작동하는지 보여주기 위해 각 포스트의 Likes 가 보이도록 GIF 캡처를 했다.

---

💜 "발행" 버튼으로 생성한 포스트의 기능 작동 확인하기

• 새로 포스트를 업로드한 경우에도 다른 기능에 영향 없이 제대로 좋아요 및 좋아요 취소 기능이 잘 작동하는 것을 볼 수 있다.

---

💜 Vuex 에 있는 state 변경하기

• Vuex 를 사용할 때에 state 를 직접 수정할 수도 있지만, 그렇게 되면 상태관리가 제대로 이루어지지 않으므로 굳이 상태관리를 위한 라이브러리인 Vuex 를 사용할 이유가 없다.
• 따라서, state 를 수정할 때에는 직접 수정하지 말고, mutations 라는 object 항목을 만들어 거기에 state 수정 방법을 함수의 형태로 정의해두고 함수를 부르는 방식으로 수정해야 한다.

---

💜 좋아요 & 좋아요 취소 기능 만들기

🤍 기능을 만들기 전에 생각해보기

• 포스트의 사진을 클릭하면 좋아요 혹은 좋아요 취소가 되는 기능을 만들 것이다.
• 좋아요 & 좋아요 취소 기능을 만들려면 일단 좋아요를 눌렀는지 안 눌렀는지를 true/false 상태로 저장해둘 필요가 있다.
• 좋아요를 누른 상태라면 좋아요가 취소되어야 하므로 좋아요 개수에서 -1 을 하면 된다.
• 좋아요를 누르지 않은 상태라면 좋아요 개수가 +1 이 되어야 한다.
• 그리고 true / false 상태에 따라 Likes 단어 뒤에 하트로 좋아요 여부를 표시해주어야 한다.
• "좋아요" 에 해당하는 state 를 수정하기 위해서는, mutations 에 함수를 만들어두고 다른 Vue 파일에서 변경이 필요할 때 함수를 부르는 방식을 사용해야 한다.
• 하나의 포스트가 아니라 전체 포스트가 독립적으로 좋아요 & 좋아요 취소 기능이 작동해야 한다.
• "더보기" 버튼을 클릭하는 경우에 불러온 포스트에도 좋아요 & 좋아요 취소 기능이 작동해야 한다.

---

🤍 store.js 수정하기

// 전체 코드 미리보기

import { createStore } from 'vuex'
import posts from './assets/posts';

const store = createStore({
  state(){
    return {
      posts: posts,
      likes: posts.map(post => post.likes),
      liked: posts.map(post => post.liked),
      heart: posts.map(post => post.liked ? "💖" : ""),
    }
  },
  mutations: {
    changeLikes(state, idx){
      if(state.liked[idx] === false){
        state.likes[idx]++;
        state.heart[idx] = "💖"
        state.liked[idx] = true;
      } else if(state.liked[idx] === true){
        state.likes[idx]--;
        state.heart[idx] = ""
        state.liked[idx] = false;
      }
    },
    changePosts(state, posts){
      state.posts = posts;
      state.likes = posts.map(post => post.likes);
      state.liked = posts.map(post => post.liked);
      state.heart = posts.map(post => post.liked ? "💖" : "");
    },
  },
})

export default store;

• 먼저 posts 에 저장되어있는 likes 와 liked 값을 사용하기 위해 posts.js 파일로부터 데이터를 posts 라는 이름으로 import 해주었다.
• likes 와 liked 의 경우, posts array 안의 각 object 에서 likes 항목과 liked 항목을 빼낼 수 있도록 map() 을 사용했다.
• heart 는 좋아요 표시 기능을 위한 state 인데, posts 에는 heart 항목이 없으므로 liked 의 true/false 여부를 가지고 map() 과 삼항 연산자를 이용하여 array 로 만들어주었다.
• 이렇게 빼내어 array 로 만들어두면 나중에 Post Component 에서 idx 를 추출하여 changeLikes() 에 활용이 가능하다.
  (idx 를 통해 독립적으로 좋아요 & 좋아요 취소 기능이 작동하게 된다.)
• 참고로 changeLikes() 를 해석하자면 다음과 같다.
  • 만약에 특정 idx 에 해당하는 포스트의 좋아요 여부가 false 라면, 좋아요 개수를 +1 해주고 좋아요 여부를 true 로 바꾸고 하트 표시를 한다. -> 좋아요 기능
  • 만약에 특정 idx 에 해당하는 포스트의 좋아요 여부가 true 라면, 좋아요 개수를 -1 해주고 좋아요 여부를 false 로 바꾸고 하트 표시를 삭제한다. -> 좋아요 취소 기능
• posts 항목의 경우 이미 App.vue 에서 import 한 뒤 반복문을 통해 메인화면에 Post Component 를 띄워주고 있기 때문에 굳이 posts 를 저장하지 않고 0 으로 저장해도 상관은 없다.
  (단, 항목 자체는 나중에 "더보기" 버튼을 통해 posts 가 업데이트되는 경우 사용해야하므로 필요하다.)
• posts 가 "더보기" 버튼을 통해 업데이트되었을 때에도 좋아요 & 좋아요 취소 기능과 좋아요 여부 표시 기능이 적용될 수 있도록 changePosts() 를 만들어주었다.
  (애초에 Vuex 를 사용했으면 이렇게 안 만들어도 될 것 같은데, 중도에 수정하다보니 모든 코드를 수정할 수 없어서 이렇게 changePosts() 라는 함수를 만들어서 진행했다. 사실 올바른 방법인지는 모르겠다.)
• changePosts() 를 해석하자면 다음과 같다.
  • "더보기" 버튼을 눌렀을 때, 기존의 posts 를 업데이트된 posts 로 교체한다.
  • 기존의 posts 에서 빼낸 likes 를 업데이트된 posts 에서 빼낸 likes 로 교체한다.
  • 기존의 posts 에서 빼낸 liked 를 업데이트된 posts 에서 빼낸 liked 로 교체한다.
  • 기존의 posts 에서 liked 의 true/false 여부를 가지고 만든 heart 를 업데이트된 posts 의 liked 의 true/false 여부를 가지고 만든 heart 로 교체한다.

---

🤍 App.vue 수정하기

// 전체 코드 미리보기
// 전체 코드 내용이 너무 길어 불필요한 부분은 제외했다.

export default {
  methods: {
    more() {
      axios
        .get(`https://codingapple1.github.io/vue/more${this.moreCnt}.json`)
        .then((result) => {
          this.posts.push(result.data);
          this.$store.commit("changePosts", this.posts);
          this.moreCnt++;
        })
        .catch(() => {
          console.log("GET 요청을 실패했습니다.");
        });
    },
    publish() {
      let myPost = {
        name: "Bak Seoyun",
        userImage: "https://placeimg.com/100/100/arch",
        postImage: this.imgUrl,
        likes: 0,
        date: "Jun 1",
        liked: false,
        content: this.content,
        filter: this.filter,
      };
      this.posts.unshift(myPost);
      this.$store.commit("changePosts", this.posts);
      this.step = 0;
      this.filter = "";
    },
  },
};

 

this.$store.commit("changePosts", this.posts);

• "더보기" 버튼을 클릭하면 more() 함수가 실행되는데, 이 함수를 통해 posts 가 업데이트되므로, 위와 같이 코드를 작성하여, changePosts 함수를 실행해달라고 store.js 에 요청하면서 this.posts 데이터를 같이 실어보냈다.
• 그리고 "발행" 버튼을 클릭하는 경우에는 publish() 함수가 실행되는데, 이 때에도 기존의 posts 에 하나의 포스트가 더 추가되어 업데이트가 필요하므로 똑같이 위의 코드를 추가해주었다.
• 이제 store.js 에서는 "더보기" 버튼이나 "발행" 버튼을 클릭하면 changePosts() 에 this.posts 를 posts 라는 파라미터로 받아 posts, likes, liked state 를 업데이트하게 된다.

 

 

---

🤍 Container.vue 수정하기

// 전체 코드 미리보기
// 전체 코드 내용이 너무 길어 불필요한 부분은 제외했다.

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

<script>
export default {
  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",
      ],
      idx: 0,
    };
  },
};
</script>

• 모든 포스트의 좋아요 & 좋아요 취소 기능이 작동하기 위해서는 사용자가 클릭한 포스트의 idx 를 찾아서 해당 idx 의 likes, liked 라는 state 의 변경을 해주어야 했다.
• 그래서, Container.vue 의 Post Component 가 반복문을 돌 때 발생하는 반복 횟수를 의미하는 i 를 idx 처럼 사용하면 좋을 것 같았다.
  (처음에는 :key 를 사용하려고 했으나 이 부분은 수정을 하면 안되는 부분이라고 에러가 발생했다.)
• data 보관함에 idx 를 만든 다음, props 문법을 이용하여 Post Component 에 i 를 idx 라는 이름으로 전송해주었다.

---

🤍 Post.vue 수정하기

// 전체 코드 미리보기
// 전체 코드 내용이 너무 길어 불필요한 부분은 제외했다.

<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"
      @click="$store.commit('changeLikes', idx)"
      :class="post.filter"
      :style="{
        backgroundImage: `url(${post.postImage})`,
      }"
    ></div>
    <div class="post-content">
      <p>{{ $store.state.likes[idx] }} Likes {{ $store.state.heart[idx] }}</p>
      <p>
        <strong>{{ post.name }}</strong> {{ post.content }}
      </p>
      <p class="date">{{ post.date }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    post: Object,
    idx: Number,
  },
  components: {},
};
</script>

• 우선, Container.vue 에서 props 문법으로 받아온 idx 를 props 에 등록해주었다.
• 포스트 사진을 클릭했을 때, 해당 포스트만 좋아요 & 좋아요 취소 기능이 동작해야했으므로, post-body 라는 이름을 가진 class 에 @click 속성을 추가하여 사진을 클릭하는 경우 changeLikes() 가 실행되도록 store.js 에 요청하면서 클릭한 포스트의 idx 를 같이 전송해주었다.
• 그리고 changeLikes() 를 통해 변경된 likes 의 값을 {{ $store.state.likes[idx] }} 라는 코드를 이용해서 post-content 라는 class 로 가져왔다.
• changeLikes() 를 통해 변경된 heart 의 값을 {{ $store.state.heart[idx] }} 라는 코드를 이용해서 post-content 라는 class 로 가져왔다.