Vue3) 모달창(팝업)을 만드는 2가지 방법. v-if, vuex store

 첫번째.  v-if를 사용하는 방법 

 

 1.  모달창 vue페이지를 만든다. 

<template>
  <div class="container">
    <h2>모달창</h2>
    <p @click="$emit('close', false)">닫기</p>
    <div>전달된 데이터: {{ this.modalData }}</div>
  </div>
</template>

export default {
  props : ['modalData']	// 호출된 곳으로부터 전달받은 데이터를 받는다.
}

 

*혹시 닫기 전에 다른 동작을 하고 닫기 위해 @click에 함수를 쓰고싶다면?*

<p @click="closePop()">닫기</p>

export default {
   methods : {
    closePop() {
      this.$emit('close');
    }

  }
}

함수안에서 닫기를 호출할때는 앞에 this를 붙이면된다!

 

 

 

 2.   호출할 페이지에서 모달 상태를 관리할 변수 선언

export default {
  , data() {
      return {
        popState : false
      }
  }
}

 

 

 3.  호출할 페이지에 모달 컴포넌트를 넣는다.

@close는 1번의 @click="$emit('close', false)" 과 연결되어있는데,

      $emit의 close와 같은 이름으로 연결해서 창을 닫는 신호를 주고 받을 수 있다. 

v-bind를 사용하면 해당 모달 창에게 값을 넘겨줄 수 있다.

<ModalTest v-if="popState" @close="changePopState()" v-bind:modalData="this.modalData">

<script>
import ModalTest from '@/spa/popup/ModalTest.vue'

, components : {
    ModalTest
}
</script>

 

 

 4.  모달창을 호출할 버튼에 함수를 달아 2번에 선언한 변수의 상태값을 바꿔준다.

<p @click="changePopState()">팝업열기</p>

changePopState() {
  this.popState = !this.popState;
}

 

---

 두번째. vuex store를 사용하는 방법 

 

 1.  전제 조건, vuex를 사용할 준비

 1)  vuex 설치      npm install vuex --save

 2)  store.js 파일 준비 : store폴더 내부에 store.js 파일 생성

// store.js
import { createStore } from 'vuex'

const store = createStore({
  state : {
  }
})

export default store;

// main.js에 등록
import store from "./store/store"

 

 

 2.  모달 상태를 저장할 변수와 상태를 변경시켜줄 함수 선언

const store = createStore({
  state : {
    popState : false
  },
  
  getters : {
    getPopState: function(state, value) {
      return state.popState;
    }
  },
    
  mutations : {
    popStateChange : function(state, value){
        state.popState = value;
    }
  }
})

 

 

 3.  모달 창 오픈 버튼과 함수 선언

<template>
  <div>
    <div @click="openModal()">열려라참깨</div>
    
    <modalTest />
  </div>
</template>

<script>
  import modalTest from '@/spa/popup/modalTest.vue'

  methods : {
    openModal(){
        this.$store.commit('popStateChange', true);
    }
  },
  , components:{
	modalTest
  }
</script>

 

 

 4.  모달 창 페이지에서 store값만 받아서 처리.

<template>
	<div id="modal" v-if="this.$store.getters.getPopState" class="testmodal">
    	<div @click="closeModal()">닫기!</div>
    </div>
</template>

<script>
export default {
    methods : {
    	closeModal(){
        	this.$store.commit('popStateChange', false);
        }
    }
}
</script>

 

---

 정리 

사실 첫번째든 두번째든 방법은 같다. 

두번째 방법에서 모달창에 v-if를 사용했는데, 호출하는 곳에서 v-if store값으로 1번과 같게 사용할 수 있다. 

 

두 방법의 다른점은 vuex를 사용했냐 안했냐인데,

이는 즉, 팝업을 띄울지 말지에 대한 상태값을 어디에 두고 설정하느냐에 다르다. 

 

첫번째는 호출하는 해당 페이지에서 상태값을 관리하고, 

두번째는 vuex store라는 전역에서 상태값을 관리한다.

 

그럼 무슨 방법을 쓰는게 좋을까..

store를 사용할지 말지는 원하는대로 사용하면되지만

사이트 내 전체적으로 공통으로 사용되는 모달창은 store으로 관리하고

특정페이지에서만 호출되는 모달창은 store없이 사용하는게 나을 것 같다는 의견이다. 

 

왜냐면 많은 모달창을 store에서 관리하게되면 아래와 같은 상태가...

const store = createStore({
    state: {
      modalState01 : false,
      modalState02 : false,
      modalState03 : false,
      modalState04 : false,
      .....
    }
})

물론 각 모달창마다 이름을 알아볼 수 있게 짓겠지만,

그 많은 모달창의 상태를 store에서 다 관리하면 나중에 헷갈릴 것 같았다. 

 

그렇다고 대부분의 페이지에서 사용할건데, 매 페이지마다 import하면서 상태변수를 만들기는 비효율적이다. 

이럴때는 최상단에 import시켜놓고 전역으로 관리하는 두번째 방법이 나을 것 같다. 

 

정답은 없으니 편한 방법으로 사용하길!ㅎㅎ

 

도움이 되었다면 좋아요 눌러주세요:)