17. 컴포넌트 기초 (컴포넌트 정의, 등록, 사용) | 네이밍 규칙 파스칼케이스

컴포넌트

 

UI(HTML, CSS, JS) 를 재사용 할 수 있도록 정의한것이 컴포넌트다.

---

컴포넌트 정의

 

 

컴포넌트를 정의하는 방법은 Single-File Conponent (SFC)를 사용하는 방법과

문자열 템플릿 (Spring template)으로 정의하는 방법이 있습니다.

 

• Single-File Conponent  (SFC) -> 실무에서 일반적으로 사용하는 방법
• 문자열 템플릿 (Spring template)

 

Single-File Component(SFC)

 

빌드 도구를 사용할 때 컴포넌트는 일반적으로 Single-File Component(SFC)로 정의할 수 있습니다.

Single-File Component(SFC)는 확장자 *.vue를 가진 단일 파일입니다.

---

문자열 템플릿

 

빌드 도구를 사용하지 않을 때 컴포넌트는 Vue 옵션인을 포함하는 일반 JavaScript 객체로 정의할 수 있습니다.

 

 

---

컴포넌트 등록

 

 

전역 등록

우리는 app.component() 메서드를 사용하여 현재 Vue 애플리케이션에서 전역적으로 사용할 수 있도록 할 수 잇습니다.

전역 등록된 컴포넌트는 애플리케이션 어떤 곳에서든 사용 가능하다.

---

지역등록

전역 등록은 편하지만 다음같은 몇 가지 단점이 있다.

 

1. Webpack(또는 Vite) 같은 빌드 시스템을 사용하는 경우 컴포넌트를 전역 등록하는것은 컴포넌트를 사용하지 않더라도 계속해서 최종 빌드에 해당 컴포넌트가 포함되는것을 의미한다. 이는 사용자가 다운로드하는 자바스크립트 파일의 크기를 불필요하게 증가시킨다.

 

2. 전역등록을 계속 하게 되면 애플리케이션의 컴포넌트간 종속 관계를 확인하기 힘듭니다. 상위 컴포넌트, 하위 컴포넌트 구분이 힘들면 유지보수를 하기 매우 어려워집니다. 

 

지역 등록된 컴포넌트는 현재 컴포넌트 영역 안에서만 사용할 수 있습니다. Vue 컴포넌트 인스턴스의 components 옵션을 사용해서 등록할 수 있습니다.

ParentComponent 컴포넌트에 로컬 등록된 ChileComponent는 현재 컴포넌트인 ParentComponent 컴포넌트에서만 사용 가능합니다.

---

컴포넌트 사용

 

등록된 컴포넌트는 <template> 안에서 원하는 만큼 사용할 수 있습니다.

그리고 컴포넌트는 사용할 때마다 해당 컴포넌트의 새 인스턴스가 생성됩니다.

즉, 사용할 때마다 setup() 함수가 실행된다는 것을 의미합니다.

---

네이밍 규칙

네이밍 규칙은 식별자 이름을 짓는 방법을 말합니다. 다양한 케이스를 살펴 보겠습니다.

Vue 공식 사이트에서는 컴포넌트를 사용할때 파스칼 케이스를 사용합니다.

1. 파스칼 케이스는 자바스크립트 코드로도 유용하고 IDE에서 자동완성 기능도 지원합니다.
2. 파스칼케이스로 작성된 컴포넌트는 HTML 기본 엘리멘트들과 비교가 가능하기 때문입니다.

 

• 카멜 케이스  
  • currentTempC, anIdentifierName 등은 카멜 케이스에 따라 이름을 지은 겁니다. 카멜 이란 이름은 중간중간의 대문자가 낙타의 혹처럼 보인다고 해서 붙었습니다.
• 스네이크 케이스 
  • current_temp_c, an_identifier_name 등은 스네이크 케이스에 따라 이름을 지은 겁니다. 스네이크 케이스는 카멜 케이스보다는 조금 덜 쓰입니다.
  • 예) current-temp-c, an-identifier-name
  • 예) CurrentTempC, AnIdentifierName
• 케밥 케이스 (Kebab Case)
  
  • 예) current-temp-c, an-identifier-name  
• 파스칼 케이스 (Pascal Case)
  • 예) CurrentTempC, AnIdentifierName

 

---

 

Base가 되는 Component 는 컴포넌트 이름 앞에 Base, App, V 셋 중 하나를 붙여야 한다고 합니다. 

 

화면에 하나만 있어야하는 컴포넌트는 앞에 The를 붙입니다. 

 

이런건 권장사항 일 뿐이고, 팀이나 회사에서 정한 룰을 따라도 좋습니다.