[ VueJS 입문 ] 컴포넌트의 사용 / Intro to Components

 

• 컴포넌트(components란?) (공식사이트 - 컴포넌트)

'컴포넌트는 하나의 독립된 기능을 하는 부품'

https://jsfiddle.net/sunghun/th2m9ws7/77/

샘플을 보면 여러개의 Vue인스턴스들이 동일한 형태로 반복 사용된걸 볼 수 있다. 이렇게 똑같은 인스턴스를 반복하는것은 비효율적이다. 이처럼 반복되는 사용을 피할 수 있는 방법이 바로 컴포넌트를 활하는 것이다. 즉 반복할 것을 컴포넌트로 만들어두고 필요할때 꺼내어 쓴다로 이해하자.

Vue.component('태그이름', 옵션)

https://jsfiddle.net/sunghun/th2m9ws7/79/

위 내용을 살펴보자. 'Hello'는 우리가 사용할 컴포넌트의 태그명이라고 생각하고 실제 HTML 코드 상에서 태그명을 그대로 <hello></hello>태그로 사용하면 된다. 그리고 인스턴스의 속성들을 data, methods 등이 들어간다.

옵션의 처음 'template'은 HTML코드를 입력하는 곳 이다.

그리고 data가 나오는데 이전과의 방식과 조금 차이가 있다. 컴포넌트의 data는 함수로 작성해 주어야 한다. 여기서 return 받은 객체가 이전까지의 data 객체 처럼 사용할 수 있는 역할을 한다.

https://jsfiddle.net/sunghun/th2m9ws7/81/

위 내용에서 title을 변경하는 methods를 추가해 보았다. 버튼을 클릭하면 changeTitle 함수를 실행 시키고 '변경된 타이틀' 이라는 title로 변경한다. 인스턴스는 한개이지만 각각 독립적인 컴포넌트들이 독립적으로 변경되는 것을 확인 할 수 있다.