Vue에서 modal 관리 쉽게하기

📌 목차

• 서론
• 기존 모달 관리
• 기존 모달 관리의 문제점
• 어떻게 해결해야할까? interface 잡아보기
• 왜 promise를 사용했는가?
• 어떻게 구현을 해야할까?
• 그럼 composition은 어떻게 사용이 되어질까?
• 결론

📌 서론

안녕하세요. 에디 입니다. 오늘은 가장 많은 분들이 고민하시는 모달 혹은 다이얼로그 관리에 대해서 한번 알아보겠습니다.
오랜 고민 끝에 나온 정의니 혹시 더 좋은 방법이 있다면 댓글로 달아주세요. 그럼 시작하겠습니다.

📌 기존 모달 관리

우리 한번 모달을 띄워야한다고 생각을 해볼까요?

그럼 우리 머리속에 가장 먼저 드는 생각은 vuex를 통한 스위칭 관리 일거예요. 대략적으로 이렇게 보통 구현을 했었을거 같아요.

// store.js
export default createStore({
  state: {
    modalOn: false
  },
  mutations: {
    setModalOn(state) {
      state.modalOn = true;
    },
    setModalOff(state) {
      state.modalOn = false;
    },
  }
});

// App.vue
<template>
  <div>
    <h1>APP</h1>
    <SimpleModal v-if="modalOn" />
    <button @click="setModalOn">ModalOn</button>
  </div>
</template>

<script>
import SimpleModal from './components/SimpleModal';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'App',
  components: {
    SimpleModal
  },
  computed: {
    ...mapState(['modalOn'])
  },
  methods: {
    ...mapMutations(['setModalOn', 'setModalOff'])
  }
};
</script>

대략 이런 형태를 생각하고 계셨나요? 저 또한 이런 on, off(boolean) 형태로 modal을 관리를 하였었는데, 이렇게 관리를 하였을때 생기는 문제점을 한번 짚어보겠습니다.

📌 기존 모달 관리의 문제점

1. 만약에 관리를 해야할 모달이 많아 진다면 어떻게 해야할까?

만약에 vuex가 많아 진다고 가정을 해볼게요. 그럼 아마 여러분의 store는 이런 형태가 될 거 같아요.

export default createStore({
  state: {
    modalOn1: false,
    modalOn2: false,
    modalOn3: false,
    modalOn4: false,
    modalOn5: false,
    modalOn6: false,
    //... 🔥 무수히 많은 모달들을 관리하는 상태가 필요함
  },
  mutations: {
    setModalOn1(state, payload) {
      state.modalOn = payload;
    },
    setModalOn2(state, payload) {
      state.modalOn = payload;
    },
    // ... 🔥 무수히 많은 모달들을 관리하는 상태를 변경하기 위한 코드들이 작성되어야 함.
  }
});

과연 정말 이렇게 관리하는 것이 바람직한 방법일까요?
혹시 지나치게 vuex를 의존하고 있다는 생각이 드시나요?
새로운 모달을 추가할 때 마다 vuex를 건들여야하는 상황이 발생할거고 그로 인해 vuex는 점점 비대해져갈 겁니다.
그럼 해당 vuex는 과연 관리가 될까요?
마찬가지로 App.vue도 같이 늘어나게 될텐데 관리 포인트가 느는건 아닐까요?

2. vuex의 mutations만 보고 실제로 어떤 모달이 뛰어지는지 한번에 파악이 가능한가?

위의 코드를 다시 한번 살펴보겠습니다.

// App.vue
<template>
  <div>
    <h1>APP</h1>
    <SimpleModal v-if="modalOn" />
    <button @click="setModalOn">ModalOn</button>
  </div>
</template>

<script>
import SimpleModal from './components/SimpleModal';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'App',
  components: {
    SimpleModal
  },
  computed: {
    ...mapState(['modalOn'])
  },
  methods: {
    ...mapMutations(['setModalOn', 'setModalOff'])
  }
};
</script>

해당 코드에서는 depth가 한 단계이기 때문에 setModalOn을 한다면 대략적으로 어떤 모달이 열리는지 알 수 있을거 같아요.
근데 보통 우리가 쓰는 코드는 엄청 나게 많은 component의 depth를 들어가야 합니다. 만약에 그럼 depth가 깊을 땐 어떻게 어떤 모달이 열리는지 파악을 할까요?

1. ChildComponent에서 어떤 Mutation을 사용하는지 확인한다.
2. Vuex에 들어가서 찾은 Mutation이 어떤 상태를 바꿔주는지 파악한다.
3. App.vue를 확인한다.(혹은 ModalContainer로 모아뒀다면 해당 Container를 확인한다.)
4. 그제서야 어떤 모달 컴포넌트가 열리는지 확인할 수 있다.

모달을 여는 method 한줄을 읽었을 때 어떤 기능 동작을 하는지 어떤 컴포넌트가 열리는지 알 수만 있다면 정말 좋지 않을까요?

3. 만약에 동시에 같은 모달을 띄워야 한다면 어떻게 해야할까?

위와 같이 관리를 하게 된다면 같은 모달이지만 새로운 모달을 등록을 하는 방식으로 등록을 해야 할거 같아요. 그럼 똑같이 vuex와 App.vue가 많이 늘어나게 될 거 예요. 정말 이게 좋은 방법일까요?

4. 만약에 모달에서 어떤 값을 받아서 페이지에서 처리를 해야한다면?

모달과 일반 컴포넌트가 서로 소통을 해야한다면 어떻게 해야할까요? 마찬가지로 vuex를 가장 먼저 떠올리실거 같아요. 그럼 vuex에 더더욱 의존적이게 되지 않을까요?

🚧 문제점 모아보기

1. vuex에 지나치게 의존적이게 된다.
2. App.vue 혹은 ModalContainer가 커지게 되어 관리 포인트가 늘어나게 된다. (vuex 또한 마찬가지)
3. 어떤 모달이 열리는지 정확하게 찾아보기가 힘들다.
4. 같은 컴포넌트를 열려고 한다면 새로운 컴포넌트 등록 방식과 동일한 사이클을 가져야 한다.

📌 어떻게 해결 해야할까? interface 잡아보기

결과적으로 최종 사용법은 이런 형태가 될거 같아요.

vue3 setup

<script setup>
import { useModal } from 'vue3-use-modal';
import SimpleModal from 'components/SimpleModal.vue';

const modal = useModal();

const onClick = async () => {
  const name = await modal.addModal<string>(
    'SimpleModal', 
    SimpleModal,
    { props: { name: 'eddie' } }
    });
  alert(`My name is: ${name}`);
}
</script>

vue3 일반 문법

<script lang="ts">
import SimpleModal from 'components/SimpleModal.vue';

export default {
  methods: {
    async onClick() {
      const name = await this.$modal.addModal<string>(
          'SimpleModal',
          SimpleModal,
          { props: { name: 'eddie' } }
        });
      alert(`My name is: ${name}`);
    }
  },
}
</script>

이렇게 사용이 되어진다면 위의 문제점을 해결할 수 있을까요?

1. vuex에 지나치게 의존적이게 된다.

-> vuex를 사용하지 않는다.
2. App.vue 혹은 ModalContainer가 커지게 되어 관리 포인트가 늘어나게 된다. (vuex 또한 마찬가지)
-> App.vue나 ModalContainer에 명시적으로 컴포넌트를 붙여주는 형태가 아니라 동적 컴포넌트를 사용하기 때문에 관리 포인트는 사용하는 쪽에서만 관리되어 진다.
3. 어떤 모달이 열리는지 정확하게 찾아보기가 힘들다.
-> 해당 함수만 보고 어떤 컴포넌트가 열리는지 바로 볼 수 있다.
4. 같은 컴포넌트를 열려고 한다면 새로운 컴포넌트 등록 방식과 동일한 사이클을 가져야 한다.
-> key값으로 자유 자재로 동작을 수정할 수 있다.

📌 왜 promise를 사용했는가?

Q> 에디 왜 하필 promise를 사용했어요?

코드를 중간에 잠시 멈추는 promise의 특성과 promise의 고유의 특성을 사용하고 싶어서 입니다.
특히 reject를 효율적으로 사용할 수 있을거라고 판단을 했어요.
reject는 중간에 코드 실행을 강제적으로 멈추고 돌아가는 특성이 있어요.

예를 들어 이런 코드가 있다고 가정해볼게요.

const onClick = async () => {
  const myname: string = await hello<string>();
  console.log(myname)
}

hello(Promise)를 반환하게 되는데 특정 상황일때 reject를 발생시킨다고 가정을 한다면 그리고 console.log를 찍으면 안되는 상황이라면 reject가 가장 적합하다고 생각했어요.

좀 더 실무적인 예시를 들어볼게요. 만약 승객이 택시비를 지불했다면 승객과 기사님에게 notification을 보내야하고 지불을 하지 않았다면 notification을 보내면 안된다고 해보겠습니다. 코드는 다음과 같아요.

const onClick = async () => {
  await payKakaoTexi(); // 승객이 금액을 지불하면 resolve 그렇지 않다면 reject
  sendNotifictationToClient();
  sendNotificationToDriver();
}

📌 어떻게 구현을 해야할까?

🚧 해당 구현 방법은 vue3 기반으로 작성이 되었습니다.

vue3에서의 createApp을 사용하고 이것을 plugin 형태로 관리를 할 예정입니다. 따라서 다음과 같은 아이들이 필요해요.

1. ModalContainer (새로운 root app)
2. 나의 app과 새로운 root app(modalContainer)를 연결해 줄 수 있는 플러그인
3. ModalContainer의 함수들을 전역에서 사용할 수 있는 플러그인

ModalContainer 만들기

먼저 Modal을 담을 수 있는 ModalContainer를 작성해줍니다. 전체적인 코드를 먼저 보여드리겠습니다.

<template>
  <div>
    <component
      v-for="modal in modals"
      :key="modal.key"
      :is="modal.component"
      v-bind="modal.props"
      @resolve="(value) => onResolve(value, modal.key, modal.resolve)"
      @reject="(value) => onReject(value, modal.key, modal.reject)"
      @close="() => closeModal(modal.key)"
    />
  </div>
</template>

<script>
import { markRaw } from 'vue';

export default {
  name: 'ModalContainer',
  data: () => ({
    modals: []
  }),
  methods: {
    addModal(key, component, configs) {
      const props = configs?.props ?? {};
      this.closeModal(key);
      return new Promise((resolve, reject) => {
        this.modals.push({
          key,
          component: markRaw(component),
          props,
          resolve,
          reject
        });
      });
    },
    closeModal(key) {
      this.modals = this.modals.filter(modalInfo => {
        if (modalInfo.key === key) {
          modalInfo.reject();
          return false;
        } else {
          return true;
        }
      });
    },
    onResolve(value, key, resolve) {
      resolve(value);
      this.closeModal(key);
    },
    onReject(value, key, reject) {
      reject(value);
      this.closeModal(key);
    }
  }
};
</script>

이제 하나하나씩 살펴 볼까요? 먼저 template 부분을 살펴보겠습니다.

// Modals 의 타입
// interface Modal {
//   key: string;
//   component: Vue.Component;
//   resolve: Promise.resolve
//   reject: Promise.reject
//   props: unknown 
// }

<template>
  <div>
    <component
      v-for="modal in modals"
      :key="modal.key"
      :is="modal.component"
      v-bind="modal.props"
      @resolve="(value) => onResolve(value, modal.key, modal.resolve)"
      @reject="(value) => onReject(value, modal.key, modal.reject)"
      @close="() => closeModal(modal.key)"
    />
  </div>
</template>

눈치를 채셨다 싶이 @resolve, @reject, @close를 각각의 모달에서 이벤트를 받아 처리를 해주는 형태가 됩니다.
그래서 사용을 하는 쪽에서 resolve, reject, close를 emit으로 각각의 상황을 설정 할 수 있어요.
만약에 어떤 모달에서 입력 값을 받고 그 입력 값을 어떤 컴포넌트에 전달을 해야한다고 가정해본다면 이렇게 모달 코드는 이렇게 작성이 될거예요.

<template>
   <div>
      <input v-model="myInput" />
      <button @click="$emit('resolve', myInput)">Submit</button
   </div>
</template>

그리고 이제 script 부분을 살펴보겠습니다.

import { markRaw } from 'vue';

export default {
  name: 'ModalContainer',
  data: () => ({
    // Modals 의 타입
    // interface Modal {
    //   key: string;
    //   component: Vue.Component;
    //   resolve: Promise.resolve
    //   reject: Promise.reject
    //   props: unknown 
    // }
    modals: [] 
  }),
  methods: {
    // 각 코드를 modals에 넣어주게 됩니다. 이때 Promise를 사용해서 대기 상태로 만들어주게 됩니다.
    // 대기 상태가 풀리는건 각 모달에서 결정하게 됩니다. ($emit)
    addModal(key, component, configs) {
      const props = configs?.props ?? {};
      this.closeModal(key);
      return new Promise((resolve, reject) => {
        this.modals.push({
          key,
          // markRaw 를 사용해준 이유는 그냥 component를 던지게 되면 성능 이슈가 있어서 raw 한 component로 변경 해주었습니다. 
          component: markRaw(component), 
          props,
          resolve,
          reject
        });
      });
    },
    // 해당 모달을 닫아 주게됩니다.
    closeModal(key) {
      this.modals = this.modals.filter(modalInfo => {
        if (modalInfo.key === key) {
          // 여기서는 reject를 사용하게 되었어요. resolve로 변경하셔도 무방합니다.
          // reject로 사용을 했던 이유는 위에 Promise 부분과 마찬가지로 
          // 닫게 되면 Promise 로 대기 되어졌던 코드 아래의 코드가 실행이 되는걸 방지하기 위함입니다.
          modalInfo.reject();
          return false;
        } else {
          return true;
        }
      });
    },
    onResolve(value, key, resolve) {
      resolve(value);
      this.closeModal(key);
    },
    onReject(value, key, reject) {
      reject(value);
      this.closeModal(key);
    }
  }
};

ModalPlugin 만들기

그럼 이제 한번 실제로 연결을 해볼까요?

import { createApp } from 'vue';
import ModalContainer from '@/modal/ModalContainer';

const createModalEl = () => {
  if (!document) throw new Error('Cannot create el in server side');
  const modalEl = document.createElement('div');
  modalEl.setAttribute('id', 'modal');
  document.body.prepend(modalEl);
  return modalEl;
};

export default {
  install(app) {
    const modalEl = createModalEl();
    const modalContainer = createApp(ModalContainer);
    const exposed = modalContainer.mount(modalEl);
    app.config.globalProperties.$modal = exposed;
    // app의 globalProperties를 가져와서 this를 동기화 시킨다.
    modalContainer.config.globalProperties = { ...modalContainer.config.globalProperties, ...app.config.globalProperties };
  }
};

실제로 사용해보기

그럼 이제 한번 모달을 띄워볼까요? 코드로 표현을 해보겠습니다.

<template>
  <section>
    <h1>Container1 normal vue</h1>
    <my-button @click="onClick">click me!</my-button>
  </section>
</template>

<script>
import SimpleModal from '../components/SimpleModal.vue';
import MyButton from '../components/MyButton.vue';

export default {
  components: { MyButton },
  methods: {
    async onClick() {
      const name = await this.$modal.addModal(
        'SimpleModal',
        SimpleModal,
        { props: { myName: 'Eddie' } },
      });
      alert(name);
    },
  },
};
</script>

동작하는 모습입니다.

📌 그럼 훅은 어떻게 사용이 되어질까?

훅은 이렇게 정의를 해주면 됩니다.

import { getCurrentInstance } from 'vue';

// getCurrentInstance로 현재 불리는 컴포넌트를 검색 한뒤에 $modal을 찾아주면 됩니다.
const useModal = () => getCurrentInstance()?.appContext?.app?.config?.globalProperties?.$modal;

export default useModal;

그럼 setup 문법에서는 이렇게 사용이 되어질수 있겠네요.

<script setup>
import useModal from '@/modal/useModal';
import SimpleModal from '@/components/SimpleModal';

const modal = useModal();

const onClick = async () => {
  const value = await modal.addModal('SimpleModal', SimpleModal, { props: { name: 'eddie' } });
  alert(value);
};
</script>

📌 결론

이렇게 한번 vue에서 모달을 관리하는 방법에 대해서 알아보았습니다. (혹시 더 좋은 의견있으시다면 자유롭게 댓글 달아주세요. 🙇🏻‍♂️).
혹시 해당 글이 어렵고 구현하기 귀찮으시다면 제가 공개한 오픈 소스 vue3-use-modal를 사용해주시면 될거예요! 많은 관심과 사랑 부탁드립니다 🦁!