Vue 컴포넌트

컴포넌트란?

• Vue의 Main 기능 중 하나
• 기본 HTML 엘리먼트를 확장하여 재사용이 가능한 코드를 캡슐화 하는데 도움을 준다
• Vue 컴포넌트 = Vue 인스턴스, 즉 모든 옵션 객체를 사용할 수 있고 라이프 사이클 훅을 사용할 수 있다

그래서 컴포넌트를 왜? 언제 쓰는데?

Vue에서는 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발하며, 이를 연결하여 프로그램이 작동하도록 한다.

이때 컴포넌트 사이에는 부모-자식 관계를 이루어 데이터의 통신이 이루어지는데, props를 통해 부모에서 props로 변수에 값을 넘겨주면, 자식에서 바로 읽어 올 수 있다.

기본적으로 Vue는 데이터 통신에 대해 단방향 이동만 지원하기 때문에, event를 통해야만 자식에서 부모로 데이터를 보내줄 수 있다.

결국 컴포넌트를 통해 우리는 재사용성이 매우 뛰어난 점과, 단위 테스트가 용이하다라는 것을 알 수 있다.

직접적으로 공부하고 있는 후기로는, 앞서 말한 데이터의 이동만 잘 처리하면 장점들을 잘 체감하고 있다.

주의점!!

직접적으로 학습을 하며 몇가지 조심해야 할 사항들을 쓰고자 한다.

• props의 데이터를 접근 할 때 this사용에 조심하자...!
• data는 컴포넌트 인스턴스의 함수여야한다. 규칙이다
• camelCase vs kebab-case 에서, HTML 속성은 대소 문자를 구분하지 않는다. camelCase prop에 대해 HTML에서는 kebab-case를 사용해주자

Vue.component('child', {
  // JavaScript는 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

<!-- HTML는 kebab-case -->
<child my-message="안녕하세요!"></child>