Vue.js - 컴포넌트 디자인 패턴(Common)

본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다.

1. Slot

• 마크업 확장이 가능한 컴포넌트
• 부모 컴포넌트에서 마크업을 넘겨받는 컴포넌트

예시

// 부모 컴포넌트
<template>
<div>
  // 자식 컴포넌트에게 '제목'이라는 문자열 넘김
  // 마크업도 가능
   <main-title>제목</title>
 </div>
</template>
...
​
​
// 자식 컴포넌트(main-title)
<template>
<strong>
  // 부모 컴포넌트에서 '제목'이라는 문자열을 넘겨받게 됨
<slot>
</slot>
 </strong>
</template>

2. Controlled

• 결합력이 높은 컴포넌트
• 서드파티 라이브러리를 사용할 때 쉽게 컨트롤할 수 있게하는 디자인 패턴

3. Renderless

• 데이터 처리 컴포넌트
• 템플릿이 없고 스크립트에서 비즈니스 로직만 있는 컴포넌트

Reference

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념