5. 뷰 컴포넌트

요즘 대부분의 프론트 프레임워크는 컴포넌트 기반으로 개발이 된다고한다.

#간단한 컴포넌트의 정의 : 화면의 영역을 영역별로 구분해서 코드로 관리하는것을 컴포넌트라고 한다
핵심 : 이렇게 정의해두는 이유는 재사용성이 올라가기 때문이다. (여러곳에서 재사용 가능)

 

간단한 예시로 화면을 Header, Main, Footer 3개의 구역으로 나눌때에 기존에는 Main의 내용이 바뀌어야

한다면 전체 페이지를 새롭게 로딩했어야 했다.

하지만 컴포넌트를 사용한다면 Main의 내용을 바꿀때에 Main 컴포넌트만 바꿔주는 방식으로

전체 페이지를 새롭게 로딩하는것이 아닌 Main에 해당하는 컴포넌트 부분만 바꿔주면 된다.

 

#전역컴포넌트의 등록 방법

전역 컴포넌트를 생성한 이미지

#지역컴포넌트의 등록 방법

지역 컴포넌트를 생성한 이미지

#전역 컴포넌트와 지역 컴포넌트의 차이점

지역 컴포넌트 : 지역 컴포넌트 형식으로 개발을 한다면
특정 컴포넌트 하단에 어떤 컴포넌트가 등록되어있는지 컴포넌트 속성으로 확인을 할 수 있다.

전역 컴포넌트 : Vue.component를 사용할때에는 플러그인이나 라이브러리 형태로 전역으로 사용해야하는
컴포넌트만 전역 컴포넌트 방식으로 사용한다.

conponents : s가 붙는 이유는 여러개를 등록하기 때문에 s가 붙는다.
methods : 이것도 마찬가지

 

#컴포넌트와 인스턴스와의 관계

(Root가 인스턴스를 생성하면 Root컴포넌트가 된다)
new Vue 인스턴스를 2개 정의하면 <Root>컴포넌트는 2개가 생긴다.