학습목표

이번 시간에는 일반 HTML로 작성된 문서를 Vue로 변환해가며 컴포넌트를 사용하면 어떤점이 좋은지 알아보도록 하겠습니다.

• 컴포넌트란 무엇인가? (What)
• 컴포넌트를 왜 사용하는가? (Why)
• 컴포넌트를 어떻게 사용하는가? (How)
  • 컴포넌트 정의 → 컴포넌트 등록 → 컴포넌트 사용
• 컴포넌트 시스템이란?

컴포넌트 (Component)

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

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

</aside>

컴포넌트를 사용하는 이유

• 컴포넌트를 사용하면 UI를 재사용 할 수 있습니다. → 프론트엔드 개발을 하다보면 JavaScript 뿐만 아니라 HTML, CSS를 반복적으로 사용할 때가 있습니다. 이런경우 컴포넌트로 캡슐화 한 후 필요한 곳에서 사용할 수 있습니다.
• 컴포넌트를 사용하여 UI를 독립적으로 나눔으로써(레이아웃 등) 코드를 클린하게 할 수 있습니다. → 프론트엔드 개발을 하다보면 코드가 길어져 유지보수가 힘들 수 있습니다. 이런경우 컴포넌트로 독립적으로 분리함으로써 코드를 클린하게 하여 유지보수를 보다 쉽게할 수 있습니다.

컴포넌트 만들기

컴포넌트를 만들고 사용하는 단계를 3가지 단계로 나누고 간단히 설명해보도록 하겠습니다.

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

컴포넌트 정의