Vue.js 내장 컴포넌트(Built-In Components)란 무엇인가?

6월 말부터 지금까지 새로운 직장에서 각자 실력이 월등한 팀원들과 함께 서비스를 준비하고 있는데요. 개발이란 직군이 매 순간 어려움에 부딪힐 수밖에 없지만, 그래도 너무 친절한 동료 덕에 잘 헤쳐나가고 있습니다. 아무튼, 오늘의 개발 포스팅은 나름 Vue.js를 공부했다고 자부했지만, 기본기도 없었던 저였음을 새삼 실감했던 시간인데요. 바로 Vue.js 내장 컴포넌트(Built-In Component) 때문이었습니다. 오늘은 그중 component라는 내장 컴포넌트를 알아보고자 해요.

😎 내장 컴포넌트 Built-In Components

Vue.js에서 기본적으로 제공하는 내장 컴포넌트는 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 공식문서에서 말하더라고요. 하지만 이게 정확히 무슨 뜻인지 알기 어려운데요. 쉽게 얘기하면 Vue.js에는 slot 컴포넌트도 있고, teleport 컴포넌트도 있고 기타 등등 Vue.js 자체적으로 사용자에게 편의를 제공하는 컴포넌트들이 있는데, component도 이 중 하나입니다. 그래서 사용 방법으로는 렌더링 할 실제 컴포넌트는 is prop에 의해 결정됩니다. 문자열로서의 is prop는 HTML 태그 이름 또는 컴포넌트 이름 일 수 있습니다.

 

정리하자면, 😏 사용방법을 알아보면, is라는 props를 사용하여 우리가 미리 만들어놓은 컴포넌트를 활용할 수도 있는데요. 잠시 코드를 참고해 보도록 하죠.

 

<!-- is 속성에 해당되는 컴포넌트가 렌더링된다. -->
<component :is="componentId"></component>

<!-- 동적 컴포넌트는 등록된 컴포넌트나 prop로 전달된 컴포넌트를 렌더힝 할 수 있다. -->
<component :is="$options.components.child"></component>

<!-- 동적 컴포넌트는 문자열로 컴포넌트를 참조할 수 있다. -->
<component :is="condition ? 'HeaderComp' : 'FooterComp'"></component> 

<!-- 동적 컴포넌트는 네이티브 HTML 엘리먼트를 렌더링 할 수도 있다. -->
<component :is="href ? 'a' : 'span'"></component>

 

위 설명만 보면, 정확히 어떤 의미인지 쉽게 다가오지 않기 때문에 예시 코드를 통해 한 번 살펴보도록 할게요. 본래는 어떤 레이아웃에 대하여 반복하는 구조가 있었어요. 아래 첨부된 사진을 보면, v-if로 한 아이템의 이름을 조회하여 그에 해당하는 컴포넌트를 불러오는 구조로 조건에 따른 레이아웃을 만드는데 45줄에 가까운 코드로 작성하였죠?

 

수정 전 코드 1-1

수정 전 코드 1-2

 

그러나 아래 코드를 보면, 단 9줄로 위 45줄에 대한 코드와 동일한 기능으로 구현할 수 있었습니다. 제가 사용한 방법이 이번 포스팅에서 설명한 내장 컴포넌트 중 component 라는 것을 사용한 것입니다. 정말 획기적이지 않나요? 이미 알고 계신 분들도 굉장히 많으시겠지만, 제게는 엄청 혁신적으로 다가왔는데요. Vue.js도 정말 많은 편리한 기능을 제공해준다는 게 너무 좋네요.

 

수정 후 코드 1-1

수정 후 코드 1-2