자유로운 개발생활
이번에는 여러개의 vue component를 팝업으로 띄울때 dynamic component를 이용하는 법에 대해 적어보겠습니다.
일단 아래 예제를 살펴보겠습니다.
Open A Open B import CustomComponentA from './CustomComponentA.vue' import CustomComponentB from './CustomComponentB.vue' export default < components: < CustomComponentA, CustomComponentB >, data () < return < arg: null, dialogA: false, dialogB: false >>, methods: < open (param) < this.arg = param this[`dialog$`] = true > > >위 예제는 두개의 버튼이 있고 'Open A' 를 클릭하면 A 가 팝업되고, 'Open B'를 클릭하면 B 가 팝업되는 단순한 구조입니다.
위 예제는 짧게 작성되어 있지만, 화면이 좀 더 복잡해 지기 시작하면 코드는 한 줄이라도 줄이는게 보기도 좋고 유지보수에도 도움이 됩니다. 그리고 사용할지 말지도 모르는 popup 컴퍼넌트를 미리 import / rendering 해 놓는것도 좀 부담이 됩니다.
이때 vue에서는 매우 재미있는 기능 하나를 제공합니다. 바로 다이나믹 컴퍼넌트 라는 방식이며 기본 설명은 공식 문서에 아주 잘 되어 있습니다.
동적 & 비동기 컴포넌트 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
그럼 이제 다이나믹 컴퍼넌트를 사용하여 위 예제를 재 작성 해 보겠습니다.
Open A Open B import CustomComponentA from './CustomComponentA.vue' import CustomComponentB from './CustomComponentB.vue' export default < data () < return < arg: null, dialog: false, customComponent: null >>, methods: < open (param) < this.arg = param this.customComponent = param === 'A' ? CustomComponentA : CustomCompoentB this.dialog = true >> >위의 '' 를 사용함으로써 동적으로 컴포넌트를 랜더링 할 수 있게 되었습니만, 이 경우라도 import 는 미리 되어 있는 상태이므로 import 를 비동기적으로 다시 변경하겠습니다.
Open A Open B export default < data () < return < arg: null, dialog: false, customComponent: null >>, methods: < open (param) < this.arg = param this.customComponent = async () =>(await import(`./CustomComponent$.vue`)).default this.dialog = true > > >위와 같이 구현하여 사용하지 않는 component에 대한 import / rendering 을 줄이고 소스도 좀 더 단순화 할 수 있게 되었습니다.
* 추가로 한번 랜더링된 컴포넌트를 계속 유지하고 싶은 경우 엘리먼트로 둘러 싸서 해결합니다.
자유로운 개발생활 'dev > vue' 카테고리의 다른 글 Vue 새로고침 시 router 가 초기화 될 때 (0) 2021.05.11 Vuetify 와 AG Grid를 더 쉽게 v-iterator (0) 2021.04.12 Vue 새창 띄우기에서 Session storage 그대로 유지하기 (0) 2021.04.07 Vue 라이브러리 NPM 배포 및 사이즈 줄이기 (0) 2021.03.05 vue ag Grid 합계 지정 하기 (0) 2020.07.28 댓글 0 댓글펼치기- 플러터로 앱개발하기 3 - VS Code에서 플러⋯
- 플러터로 앱개발하기 2 - Android 에뮬레이⋯
- 플러터로 앱개발 하기 1 - 플러터 설치
- Nativescript-vue 사용 (1)
- run without debug 을 통해 실행하니 에뮬⋯
- 안녕하세요. 확인이 늦어 죄송합니다. 제가 네스트 js⋯
- 안녕하세요 ~~ 글 너무 잘봤습니다 혹시 미들웨어쪽⋯
- 네 맞습니다. 요즘 일때매 정신이 없어서 잘 신경을 못⋯