[Vue] Component(컴포넌트)에 대해 알아보자 (1)

Vue 공식홈페이지 설명

 

간단히 설명하면 컴포넌트는 블록과 같이 생각하면 되고, 여러 곳에서 재활용하기 위해 만드는 것이다.

예를 들면 게시판의 검색기능이 있다고 하면, 검색기능은 이곳저곳에서 많이 쓴다.

그럴때마다 검색기능 코드를 쓰는 것보다 "검색기능" 이라는 컴포넌트를 만들어 놓고 각 게시판에 해당

컴포넌트는 넣기만 하면 되는 것이다. 

그럼 바로 컴포넌트(전역)를 만들어 보자 

 

============================================================================

 

1. 컴포넌트 생성

Vue.component('컴포넌트 이름', {     //컴포넌트 내용 });

자 이렇게 컴포넌트를 등록하였다. <div>로 감싸서 화면에 helloWorld!!!라는 문구를 찍어준다.

template 속성은 사용자정의 태그를 작성해준다.

여기서 주의할 점은

 

1. 컴포넌트명은 카멜표기법으로 쓰면 안된다. 대문자를 인식하지 않기 때문에 컴포넌트명을 인식하지 못해 다음과 같은

에러가 발생한다.

에러를 보면 해당 name. 즉 컴포넌트명을 찾지 못하고 있다. 대문자 때문에 인식을 못하기 때문, 주의가 필요하다.

 

2. 컴포넌트를 생성한 뒤 뷰 인스턴스를 생성해야 한다. 화면에 표출 되는 순서는 다음과 같다.

뷰 생성자로 컴포넌트 등록 -> 인스턴스 객체 생성 -> 특정 화면 요소에 인스턴스 부착 순서로 진행됨.

 

샘플로 만든 코드를 보면 알겠지만, 컴포넌트를 먼저 생성하고 뷰인스턴스 객체를 아래에 생성해주었다.

만약 뷰인스턴스 객체를 생성하지 않거나, 컴포넌트보다 먼저 생성하면 어떻게 될까? 당연히 에러가 발생한다.

 

뷰 인스턴스 객체를 먼저 생성한 경우 똑같이 컴포넌트를 찾지 못한다고 한다. 왜냐하면 

뷰 인스턴스 객체가 생성 될 때 아직 컴포넌트가 등록되어 있지 않기 때문이다. 그렇기 때문에 반드시 순서는 지킬 것!

 

이제 아래와 같이 화면에 뿌려 줄 수 있다.

 

 

컴포넌트명을 태그로 감싸주기하면 하면 해당 template안에 있는 내용이 그대로 화면에 표출 된다. 여기서 태그를

4번 써주니 "helloWorld!!!" 4번 화면에 표출되었다

 

현재는 간단한 문구를 표출해주기만 하지만, 만약 복잡한 기능(캘린더 또는 검색기능 등...)이라면 

그 복잡한 코드를 여러번 작성하지 않고, 컴포넌트로 등록하여 재활용 가능할 것이다.

 

결론 : 컴포넌트는 주로 코드를 재활용 할 때 사용한다.