컴포넌트 (Component)

자바스크립트에서 재사용할 수 있도록 코드를 분리한 파일을 모듈이라고 한다.
Vue에서도 마찬가지로 UI(HTML, CSS, JS)를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다.

컴포넌트 => 재사용

컴포넌트 왜 씀?

1. 컴포넌트를 사용하면 UI(HTML,CSS,JavaScript)를 재사용 할 수 있다.
   아니 이 코드 아까 쓴건데 여기다 또 써..?
   => 컴포넌트로 캡슐화 한 후 필요한 곳에서 사용

2. 컴포넌트를 사용하여 UI를 독립적으로 나눔으로써(레이아웃 등) 코드가 클린해짐
   긴 코드 => 유지보수 힘듦 => 컴포넌트로 독립적으로 분리함으로써 코드를 클린하게 하여 유지보수를 보다 쉽게 함

컴포넌트 만들기

컴포넌트 정의 → 컴포넌트 등록 → 컴포넌트 사용

컴포넌트 정의

컴포넌트 정의하는 두 가지 방법

1.문자열 템플릿

  const 컴포넌트이름 = {
      tmeplate:`
          <div>
              <h1>컴포넌트 내용이 채워지겠지</h1>
          </div>
      `
  }

2. Single File Component (SFC)

   여러 문제점들 때문에 .vue 확장자를 가진 Single File Component (SFC)를 사용한다.
   SFC는 template, script, style 크게 세 가지로 구성되어 있다.
   실무에서는 문자열 템플릿 대신 Single File Component를 사용

컴포넌트 등록

컴포넌트를 어디에서 사용하냐에 따른 두 가지 등록 방법

1. 전역 등록 (Global Registration)

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

   app.component("컴포넌트이름",컴포넌트이름)

2. 지역 등록 (Local Registration)

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

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

컴포넌트 사용

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

<컴포넌트이름></컴포넌트이름>

PascalCase로 등록 된 컴포넌트는 PascalCase, kebab-cased 둘 다 사용 가능

kebab-cased로 등록 된 컴포넌트는 kebab-cased 로만 사용 가능합니다.