Vue.js 영화 App) Modal 컴포넌트로 분리하기

1. Modal을 컴포넌트로 분리하기

• Modal.vue 만들기

<template >
    <div v-if="isModal" class="modal">
      <div class="inner">
        <button class="close-btn" @click="isModal=false">X</button>
        <h3>영화 '{{ selectedMovie.title }}'</h3>
        <p>{{ selectedMovie.detail }}</p>
      </div>
    </div>
</template>
<script>
export default {
    name: 'ModalComponent',
}
</script>

<style>
    
</style>

• App.vue에 modal 컴포넌트 항목을 가져와서 추가하고 변수로 정의

• 필요한 곳에 추가

<template>
  <div>
		...
    <Modal />
   
  </div>
</template>

<script>
import movies from './assets/movies'; // 영화 데이터
import Navbar from './components/Navbar.vue'; // 네브바 데이터
import Modal from './components/Modal.vue'; // 모달 데이터

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

<style>
...
</style>

3. Modal창 오류 제거하기

• 자식에게 변수 값 전달하기

<template>
  <div>
    <Navbar />
    <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>

    <!-- 자식에게 변수 값 전달하기 -->
    <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';

export default {
  name: 'App',
  data() {
    return {
      isModal: false,
      selectedMovie: null,  // 초기화 시 null로 설정
      movies: movies
    }
  },
  methods: {
    incrementLike(i) {
      this.movies[i].like++;
    },
    selectMovie(i) {  // 새로운 메서드 추가
      this.selectedMovie = i;
      this.isModal = true;
    },
  },
  components: {
    Navbar: Navbar,
    Modal: Modal
  }  
}
</script>

<style>
...
</style>

• props로 부모로 부터 값 받아오기
• 자식은 데이터 변경이 불가능함
• emit으로 부모에게 커스텀 이벤트를 전달
• 클릭되면 상태값을 변경해달라고 요청해야 함

<template >
    <div v-if="isModal" class="modal">
      <div class="inner">
        <button class="close-btn" @click="$emit(`closeModal`)">X</button>
        <h3>영화 '{{ movies[selectedMovie].title }}'</h3>
        <p>{{ selectedMovie.detail }}</p>
      </div>
    </div>
</template>
<script>
export default {
    name: 'ModalComponent',
    // APP에 있는 변수를 컴포넌트에 전달
    props: { // 변수명 : 데이터 타입
        movies: Array,
        isModal: Boolean,
        selectedMovie: Number // 데이터 변경은 부모만 가능
    }
}
</script>

<style>

</style>