Vue에서 컴포넌트를 동적으로 전환하는 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Vue.js 개발자(중급 이상), 다이나믹 UI 구현이 필요한 프론트엔드 개발자
핵심 요약
:is
속성을 사용한
태그로 컴포넌트를 동적으로 렌더링 가능tabs
객체에 컴포넌트 매핑하여v-if
조건문 대체- 코드 가독성 및 유지보수성 향상을 위한 권장 방법
섹션별 세부 요약
1. `v-if` 조건문 대체의 한계
- 다중
v-if
조건문 사용 시 코드 복잡도 증가 v-if
를 사용한 탭 전환 예시 코드 제공activeTab
상태와ProfileCard
,SettingCard
등 컴포넌트 import 예시
2. 동적 컴포넌트 사용 방법
구문으로 동적 렌더링tabs
객체에 컴포넌트명과 컴포넌트 매핑 예시 (profile: ProfileCard
):is
속성은.vue
파일, 글로벌 컴포넌트명, HTML 태그 모두 지원import MyComponent from './components/my-component.vue'
예시 제공
결론
:is
속성과tabs
객체를 활용한 동적 컴포넌트 사용법은 복잡한 조건문 대체 및 코드 정리에 효과적v-if
대신
사용을 통해 성능 및 가독성 향상 가능tabs
객체에 컴포넌트를 미리 매핑하여 유지보수성 극대화 권장