[Vue.js] 컴포넌트에 대해

HTML -> Vue 로 변환해서 컴포넌트의 이점을 알아보자.

 

• 컴포넌트란?
• 컴포넌트를 왜 사용?
• 컴포넌트는 어떻게 사용?
  • 컴포넌트 정의 ➜ 컴포넌트 등록 ➜ 컴포넌트 사용
• 컴포넌트 시스템이란?

 

---

 

컴포넌트 (Component)

자바스크립트에서 재사용할 수 있도록 코드를 분리한 파일을 모듈이라고 한다.

Vue 에서도 UI(HTML, CSS, JS) 를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다.

📌 JavaScript 코드를 재사용하는 모듈과 다르게, 
컴포넌트는 JavaScript 뿐만 아니라 HTML, CSS 도 함께 캡슐화하여 재사용이 가능하게 한다.

 

 

컴포넌트를 사용하는 이유

• 컴포넌트를 사용하면 UI를 재사용할 수 있다.

➜ 프론트엔드 개발을 하다보면 JavaScript 뿐만 아니라 HTML, CSS 를 반복적으로 사용할 때가 많다. 이때, 컴포넌트를 캡슐화 한 후 필요한 곳에서 사용할 수 있다.

• 컴포넌트를 사용하여 UI를 독립적으로 나눔으로써(레이아웃 등) 코드를 클린하게 할 수 있다.

➜ 프론트엔드 개발을 하다보면 코드가 길어져 유지보수가 힘들 수 있다. 이때, 컴포넌트로 독립적으로 분리함으로써 코드를 클린하게 하여 유지보수를 보다 쉽게할 수 있다.

 

 

 

컴포넌트 만들어보기 (3단계)

• 컴포넌트 정의 ➜ 컴포넌트 등록 ➜ 컴포넌트 사용

 

 

 

 

 

컴포넌트  정의

컴포넌트를 어떤 방법으로 정의 하느냐에 따라 문자열 템플릿, Single File Component 2가지 방법이 있다

 

 

1️⃣ 문자열 템플릿 (string template)

2️⃣ Single File Component (SFC)

자바스크립트로 복잡한 프로젝트를 개발한다면 다음과 같은 어려움이 존재한다.
문자열 템플릿은 가독성이 떨어지고 예쁘지 않다.
.js 는 HTML 과 JavaScript 는 모듈화 할 수 있지만, CSS 는 빠져있다.
(그 외의 문제는 공식문서에서 확인)

➜ 이 모든 문제를 해결하기 위해서 Vue.js 는 Webpack, Browserify, Vite 와 같은 빌드 도구를 활용하여 
.vue 확장자를 가진 Single File Component(SFC) 를 사용한다.

 

SFC 는 template, script, style 크게 3가지로 구성되어 있다.

실무에서는 문자열 템플릿 대신 SFC 를 사용한다.

 

 

 

 

컴포넌트  등록

컴포넌트를 어디에서 사용하냐 에 따라 2가지 등록 방법이 있다.

 

1️⃣ 전역 등록 (Global Registration)

app.component 를 이용해서 컴포넌트를 등록하면, 컴포넌트느느 애플리케이션 전역 등록이 되어 모든 컴포넌트 인스턴스의 템플릿 내부에서 사용할 수 있다.

2️⃣ 지역 등록 (Local Registration)

전역 등록은 보통 이상적이지 않다.

예를 들어 Webpack 과 같은 빌드 시스템을 사용하는 경우 컴포넌트를 전역 등록하게 되면 컴포넌트를 사용하지 않더라도 계속해서 최종 빌드에 해당 컴포넌트가 포함되는 것을 의미한다.

이는 사용자가 다운로드하는 자바스크트 파일의 크기를 불필요하게 증가시킨다.

 

➜ Vue 인스턴스의 component 속성 안에 정의해라. 그러면 해당 Vue 인스턴스에서 지역 등록된 컴포넌트를 사용할 수 있다.

 

 

 

 

컴포넌트  사용

컴포넌트는 template  에서 사용할 수 있다.

• PascalCase (파스칼 케이스) 에서 등록 된 컴포넌트는 PascalCase, kebab-case 둘 다 사용 가능하다.
• kebab-case 로 등록 된 컴포넌는 kebab-case 로만 사용 가능하다.

 

📌 컴포넌트 네이밍 룰

SFC, string template 에서 PascalCase 를 사용 가능하며

DOM Template에서는 kebab-case 를 사용해야 한다.

https://vuejs.org/guide/components/registration.html

Component Registration | Vue.js

 

 

 

 

컴포넌트  시스템

컴포넌트 시스템은 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적 개념이다.

거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있다.

• 작은 의미 재사용 가능한 컴포넌트
• 넓은 의미 모든 Vue 인스턴스는 컴포넌트이다

쉽게 말해, Vue 는 컴포넌트로 구성된 애플리케이션이다!