Vue.js 영화 App) movies 컴퍼넌트로 만들기

1. Movies.vue 만들기

2. 영화 정보 가져오기

<template>
    <div
      <h1>영화 정보</h1>
      <div v-for="(movie, i) in movies" :key="i" class="item">
      <figure>
        <img :src="movie.imgUrl" :alt="movie.title">
      </figure>
      <div class="info">
        <h3 class="bg-yellow">{{ movie.title }}</h3>
        <p>개봉: {{ movie.year }}</p>
        <p>장르: {{ movie.category }}</p>
        <p>상영시간: {{ movie.time }}</p>
        <p>등급: {{ movie.rating }}</p>
        <button v-on:click="incrementLike(i)">좋아요</button>
        <span>{{ movie.like }}</span>
        <p>
          <button @click="selectMovie(i)">상세보기</button>
        </p>
       </div>
      </div>
    </div>
</template>

3. 컴포넌트로 등록하기

<script>
export default {
    name: "MoviesComponent"
}
</script>

4. App.vue에서 컴포넌트 불러오기

<template>
  <div>
    <Navbar />

    <Movies :movies="movies" />

    <!-- 자식에게 변수 값 전달하기 -->
    <Modal 
    :movies="movies" 
    :isModal="isModal" 
    :selectedMovie="selectedMovie"
    @closeModal="isModal=false" />
   
  </div>
</template>

<script>
import movies from './assets/movies';
import Navbar from './components/Navbar.vue';
import Modal from './components/Modal.vue';
import Movies from './components/Movies.vue';

export default {
  name: 'App',
  data() {
    return {
      isModal: false,
      selectedMovie: null, 
      movies: movies
    }
  },
  methods: {
    incrementLike(i) {
      this.movies[i].like++;
    },
    selectMovie(i) {
      this.selectedMovie = i;
      this.isModal = true;
    },
  },
  components: {
    Navbar: Navbar,
    Modal: Modal,
    Movies: Movies,
  }  
}
</script>

4. 영화 데이터를 자식에게 전달하기

<template>
  <div>
    <Navbar />

    <Movies :movies="movies" />

    <!-- 자식에게 변수 값 전달하기 -->
    <Modal 
    :movies="movies" 
    :isModal="isModal" 
    :selectedMovie="selectedMovie"
    @closeModal="isModal=false" />
   
  </div>
</template

5. 부모 데이터 받기

• 전체는 컨테이너로 감싸서 디자인 정리하기

<template>
    <div class="Container">
      <h1>영화 정보</h1>
      <div v-for="(movie, i) in movies" :key="i" class="item">
      <figure>
        <img :src="movie.imgUrl" :alt="movie.title">
      </figure>
      <div class="info">
        <h3 class="bg-yellow">{{ movie.title }}</h3>
        <p>개봉: {{ movie.year }}</p>
        <p>장르: {{ movie.category }}</p>
        <p>상영시간: {{ movie.time }}</p>
        <p>등급: {{ movie.rating }}</p>
        <button v-on:click="incrementLike(i)">좋아요</button>
        <span>{{ movie.like }}</span>
        <p>
          <button @click="selectMovie(i)">상세보기</button>
        </p>
       </div>
      </div>
    </div>
</template>
<script>
export default {
    name: "MoviesComponent",
    props: {
      movies: Array
    }
}
</script>
<style>
    
</style>

• CSS 적용하기

<style>
.container {
  padding: 20px;
}
</style>

6. 상태값 변경 요청하기

• 상세보기를 열 수 있는 클릭 이벤트, 보여줄 영화정보의 인덱스가 필요함

• 부모에게 커스텀 이벤트 요청

• $emit(이름, 값)

<template>
    <div class="Container">
      <h1>영화 정보</h1>
      <div v-for="(movie, i) in movies" :key="i" class="item">
      <figure>
        <img :src="movie.imgUrl" :alt="movie.title">
      </figure>
      <div class="info">
        <h3 class="bg-yellow">{{ movie.title }}</h3>
        <p>개봉: {{ movie.year }}</p>
        <p>장르: {{ movie.category }}</p>
        <p>상영시간: {{ movie.time }}</p>
        <p>등급: {{ movie.rating }}</p>
        <button v-on:click="incrementLike(i)">좋아요</button>
        <span>{{ movie.like }}</span>
        <p>
          <button @click="$emit('openModal', i)">상세보기</button>
        </p>
       </div>
      </div>
    </div>
</template>

• 상태값 변경해주기

<template>
  <div>
    <Navbar />

    <Movies 
    :movies="movies" 
    @openModal="isModal=true;
    selectedMovie=$event" />

    <!-- 자식에게 변수 값 전달하기 -->
    <Modal 
    :movies="movies" 
    :isModal="isModal" 
    :selectedMovie="selectedMovie"
    @closeModal="isModal=false" />
   
  </div>
</template>

7. 좋아요 버튼 상태 변경해주기

<template>
    <div class="Container">
      <h1>영화 정보</h1>
      <div v-for="(movie, i) in movies" :key="i" class="item">
      <figure>
        <img :src="movie.imgUrl" :alt="movie.title">
      </figure>
      <div class="info">
        <h3 class="bg-yellow">{{ movie.title }}</h3>
        <p>개봉: {{ movie.year }}</p>
        <p>장르: {{ movie.category }}</p>
        <p>상영시간: {{ movie.time }}</p>
        <p>등급: {{ movie.rating }}</p>
        <button v-on:click="$emit('incrementLike', i)">좋아요</button>
        <span>{{ movie.like }}</span>
        <p>
          <button @click="$emit('openModal', i)">상세보기</button>
        </p>
       </div>
      </div>
    </div>
</template>

• 상태 값 변경해주기

<template>
  <div>
    <Navbar />

    <Movies 
    :movies="movies" 
    @openModal="isModal=true;
    selectedMovie=$even"
    @incrementLike="incrementLike($event)" />

    <!-- 자식에게 변수 값 전달하기 -->
    <Modal 
    :movies="movies" 
    :isModal="isModal" 
    :selectedMovie="selectedMovie"
    @closeModal="isModal=false" />
   
  </div>
</template>