Vue.js - SFC(Single File Component)

🔔SFC (Single File Component)

|Component (컴포넌트)

생성자 함수 → 객체를 만들기 위함.

인스턴스 → 생성자 함수로 만들어진 객체

• 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌
• CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미
• 즉, 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공

Vue 컴포넌트 === Vue 인스턴스

 

 

|SFC (Single File Component)

• Vue의 컴포넌트 기반 개발의 핵심 특징
• 하나의 컴포넌트는 .vue 확장자를 가진 하나의 파일 안에서 작성되는 코드의 결과물
• 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리
• 즉, .vue 확장자를 가진 싱글 파일 컴포넌트를 통해 개발하는 방식

Vue 컴포넌트 === Vue 인스턴스 === .vue파일

 

 

|단일 파일 관리

• 단일 파일에서의 개발
  • 처음 개발을 시작 할 때는 크게 신경 쓸 것이 없기 때문에 쉽게 개발 가능
  • 하지만 코드의 양이 많아지면 변수 관리가 힘들어지고 유지보수에 많은 비용 발생

 

 

|한 화면을 구성하는 여러 컴포넌트

• • 처음 개발을 준비하는 단계에서 시간 소요가 증가
  • 하지만 이후 변수 관리가 용이하며 기능 별로 유지 & 보수 비용 감소각 기능 별로 파일을 나눠서 개발

• 한 화면 안에서도 기능 별로 각기 다른 컴포넌트가 존재
  • 하나의 컴포넌트는 여러 개의 하위 컴포넌트를 가질 수 있음
  • Vue는 컴포넌트 기반의 개발 환경 제공
• Vue 컴포넌트는 **const app = new Vue({...})**의 app을 의미하며 이는 Vue 인스턴스
  • 여기서 오해하면 안 되는 것은 컴포넌트 기반의 개발이 반드시 파일 단위로 구분되어야 하는 것은 아님
  • 단일 .html 파일 안에서도 여러 개의 컴포넌트를 만들어 개발 가능

 

 

|정리

• Vue 컴포넌트는 Vue 인스턴스(new Vue({}))이기도 함
• Vue 인스턴스는 .vue 파일 안에 작성된 코드의 집합
• HTML, CSS, 그리고 JavaScript를 .vue라는 확장자를 가진 파일 안에서 관리하며 개발