뷰 컴포넌트

뷰 컴포넌트

---

컴포넌트는 화면을 구성하는 블록을 의미한다.

컴포넌트를 활용하면 화면을 빠르게 구조화하여 정해진 패턴으로 개발할 수 있게 된다.

화면을 컴포넌트 단위로 재활용하는 형태로 관리하면 코드를 재사용하기 편리해진다.

특히 코드를 직관적으로 이해할 수 있다는 것이 큰 장점이다.

컴포넌트 종류

---

컴포넌트를 사용하는 방법은 전역 선언과 지역 선언 두 가지 방식이 존재한다.

지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 

전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.

전역 컴포넌트

---

전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근이 가능한 Vue 생성자를 이용해 등록한다.

Vue 생성자에 .component()를 호출하여 수행한다.

컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성한다.

(template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.)

!만약 전역 컴포넌트 정의를 인스턴스 생성을 수행한 후 정의할 경우 아래와 같은 에러가 발생한다.

따라서 인스턴스 생성 전에 컴포넌트 정의를 해주자.

전역 컴포넌트가 생성되고 처리되는 과정은 다음과 같다.

뷰 라이브러리 파일 로딩

▼

뷰 생성자로 컴포넌트 등록

Vue.component()

▼

인스턴스 객체 생성

(옵션 속성 포함)

▼

특정 화면 요소에 인스턴스 부착

▼

인스턴스 내용 변환

(등록된 컴포넌트 내용도 변환)

▼

변환된 화면 요소를 사용자가 최종 확인

지역 컴포넌트

---

지역 컴포넌트는 전역 컴포넌트와 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.

지역 컴포넌트 또한 template, data, methods 등의 인스턴스 속성을 작성할 수 있다.

해당 내용은 'Do it! Vue.js 입문'을 참고하여 공부한 내용을 정리한 글입니다.