Vue.js 공부 기록(9) - 전역, 지역 컴포넌트(Component) 개념, 사용법

위와 같은 코드를 분석해 보면 거의 유사한 중복 코드가 작성되었다고 할 수 있다.

개발자는 언제나 간결하고 중복 없는 효율적인 코드가 필수이기 때문에 이런 경우 뷰 컴포넌트를 활용할 수 있다.

 

1. 컴포넌트란

• 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이다.
• 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 된다.

• Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용한다.
• 각각의 컴포넌트 간 데이터의 이동은 단방향 이동만 가능함. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때에는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식 컴포넌트가 읽어올 수 있음.
• 한 번 작성한 컴포넌트는 다른 곳에서 여러 번 사용할 수 있어 재사용성이 매우 뛰어나다는 장점이 있다.

2. 뷰 컴포넌트(Vue Component) 생성 및 사용

뷰 컴포넌트는 전역 컴포넌트 & 지역 컴포넌트 2가지가 있다.

• 전역(Global) 컴포넌트 : 여러 인스턴스에서 공통적으로 사용할 수 있는 컴포넌트, 뷰로 접근 가능한 모든 범위에서 사용 가능
• 지역(Local) 컴포넌트 : 특정 인스턴스에서만 유효 범위를 가짐.

🔍전역 컴포넌트 등록

• 전역 컴포넌트는 뷰 라이브러리 로딩 후 접근 가능한 Vue 변수를 이용하여 등록함.

Vue.component('컴포넌트 이름', '옵션')

• 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행하면 됨.
• 컴포넌트 이름 : 이 컴포넌트를 사용하기 위한 이름 / 옵션 : 컴포넌트 렌더링 시 필요한 여러 옵션 작성.

위와 같이 작성 후 실행해 보면 루트 엘리먼트가 없어서 컴파일 에러가 난다.

해결하기 위해 하나의 태그로 감싸주어야 한다.

아래와 같이 버튼이 잘 출력되고

버튼도 잘 동작한다.

🔍지역 컴포넌트 등록

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

아래와 같이 주석처리 후 실행하면 에러가 나고,

 

이렇게 components 속성을 추가해 주면

잘 실행된다.