오늘은 vue에서 동적 컴포넌트를 사용하는 방법에 대해 알아보겠다
(정확한 이름이 동적 컴포넌트 인지는 모르겠다)
(참고로 ts가 적용된 vue3에서 작업했다)
보통 컴포넌트를 사용할때는
아래 그림과 같이 여러 컴포넌트를 불러와 하나의 view를 만든다
하지만 오늘 해볼거는 저게 아니라
아래 그림과같이 상황에따라 하나의 view를 두고 안에 컴포넌트를 갈아끼는거를 해볼거다
이게 어떤 상황에 필요하냐면
일련의 단계가 있는 컴포넌트를 구현할때
(예를들면 MBTI검사를 할때 문항에 체크하고 다음 페이지로 넘어가는 그런상황)
필요할 거 같고 다른 여러 상황에도 적용시킬수 있을 것 같다
물론 view하나당 컴포넌트 하나씩 넣어서 다뤄도 크게 문제는 안되겠지만
이렇게 동적 컴포넌트를 쓰면 A,B,C 컴포넌트에 있는 데이터들을
하나의 뷰에서 다를수 있는 장점이 있을것 같고
GPT에 의하면
이러한 장점이 있다고 한다
그럼 이제 어떻게 구현하는지 알아보자!
먼저 프로젝트 생성해주고
views 폴더에는 Home.vue를
components 폴더에는 Component_A,B,C를 각각 만들었다
오늘의 최종 목표는 Home.vue에서 처음엔 Component_A를 보여주고
버튼을 누르면 B,C로 넘어가는 것을 구현할것이다
<template>
<div>
<component :is="currentComponent()"/>
</div>
</template>
<script lang="ts" setup>
import Component_A from '@/components/Component_A.vue';
import Component_B from '@/components/Component_B.vue';
import Component_C from '@/components/Component_C.vue';
import { ref} from 'vue';
const step = ref(1)
const currentComponent=() => {
switch(step.value) {
case 1 : return Component_A;
case 2 : return Component_B;
case 3 : return Component_C;
}
}
</script>
Home.vue는 일단 이렇게 작성하였다
step이 현재는1이고 1일때는 Component_A
2,3일때는 각각 B,C가 보이도록 했다
if문을 써도 가능하지만 switch 문이 더 간결해 보여 switch문을 사용했다
이게 지금 현제 화면이고 A가 잘 나오고 있다
위에 코드에서 step 값을 2,3으로 바꾸면
컴포넌트 B,C가 잘 나오는것을 확인할 수 있을것이다
그럼 이제 컴포넌트 A에서 버튼을 만들어서 B로 넘어가는 것을 구현해 보겠다
<template>
<div>
AAAAAAAAAAAAAAAAAAAAAAA
</div>
<v-btn @click="goToB">B로 바뀌는 버튼</v-btn>
</template>
<script setup lang="ts">
const emit = defineEmits(['currentStep'])
const goToB = () => {
emit('currentStep',2)
}
</script>
<style lang="">
</style>
Component_A 는 이렇게 작성해 주었다
버튼을 누르면 goToB 함수가 실행되고 emit을 보낸다
구글링을 해보니 vue3에서는 저런식으로 defineEmits를 해주고 emit을 보내는 것 같다
<template>
<div>
<component :is="currentComponent()" @currentStep="switchStep"/>
</div>
</template>
<script lang="ts" setup>
import Component_A from '@/components/Component_A.vue';
import Component_B from '@/components/Component_B.vue';
import Component_C from '@/components/Component_C.vue';
import { ref} from 'vue';
const step = ref(1)
const currentComponent=() => {
switch(step.value) {
case 1 : return Component_A;
case 2 : return Component_B;
case 3 : return Component_C;
}
}
const switchStep = (currentStep: number) => {
step.value = currentStep
}
</script>
Home.vue는 이렇게 작성했다
@currentStep="switchStep" 을 추가해줘서 @currentStep emit을 받아오고
switchStep 함수를 실행하게
화면으로 보자면
이 상태에서 저 버튼을 누르면
컴포넌트 B가 화면에 보이는것을 확인할 수 있다
같은 방식으로 B에도 같은 버튼을 만들어주면 C로 이동할 수 있다
오늘은 동적컴포넌트에 대해 알아보았다
매우 기본적인 것만 했지만 여러가지를 더 추가하면 많은 곳에서 활용할 수 있을거 같다
더 발전된 내용이 추가된다면 다시 포스팅 하겠다
부디 도움이 됐기를..
추가사항
이거를 v-show나 v-if를 써서 거의 똑같이 구현할수도 있는데
v-show를 쓰면 DOM에서 컴포넌트는 항상 렌더링 되고 단순히 display:none인 상태여서
초기 렌더링이 더 오래 걸리지만 상태 전환이 빠를 수 있고
component :is 를 쓰는 방법은 현재 필요한 컴포넌트만 렌더링돼서 초기 로딩 속도는 줄일수 있지만
컴포넌트 전환간에 시간이 더 걸릴 수 있다
참고하시길
'개발💻 > Vue' 카테고리의 다른 글
[Vue] Vue 정리하기(14) - Provide, Inject를 사용해서 전역에서 변수,함수 사용하기(vue3) (4) | 2023.11.24 |
---|---|
[Vue] Vue 정리하기(13) - 동적 컴포넌트(Dynamic Component ), 형제 컴포넌트간 데이터 전달 (4) | 2023.11.24 |
[Vue] Vue 정리하기(11) - Pinia, axios, typescript 사용해서 TMDB에서 영화 데이터 가져와서 v-for 로 화면에 보여주기 (3) | 2023.11.16 |
[Vue] Vue 정리하기(10) - Pinia, axios (0) | 2023.09.26 |
[Vue] Vue 정리하기(9) - Pinia 알아보기 (Getters, Actions) (0) | 2023.09.25 |