[ VueJS 로 프론트엔드 개발 ] 컴포넌트 정의 및 태그 생성, 렌더링

VueJS 에서는 각 컴포넌트 단위로 객체를 생성 관리하여 호출하는 식으로 사용할 수 있다. 예를 들어 게시판, 댓글 등 자주 사용되는 컴포넌트들을 한 번 구현해두고 호출하는 식으로 사용할 수 있다. 특히 태그를 사용자 정의 태그로 호출하여 사용할 수 있는데 그 방법은 아래와 같다.

위 코드를 보면 Test 라는 어떤 컴포넌트를 import 한 뒤 해당 Test 라는 태그로 템플릿에 선언한 것을 알 수 있다. 템플릿은 실제 Virtual Dom 이 렌더링되는 영역으로 실제 페이지 영역에 보이는 부분이다.

즉 Test 태그를 선언하면 Test 라는 파일 내에 있는 template 영역이 렌더되어 표시된다.

위 코드는 Test.vue 파일인데, 이 안에 스크립트 기본 초기화 내용, 템플릿 내용, 스타일 내용을 선언할 수 있다. script 영역에 setup 이 속성으로 추가되어 있는데, 이는 자동으로 setup() 함수를 정의하여 시스템에 넘겨주는 것을 의미한다.

defineProps를 통해 message 라는 데이터를 받고 있는데, 이는 부모에서 이 파일을 태그로 호출할 때 속성 message 를 읽어오는 것이다.

한편 스타일을 넣을 때 scoped 로 넣으면 영역을 해당 컴포넌트에만 적용되는 스타일을 생성할 수 있다.

위를 보면 <style scoped> 된 영역 안의 .main 을 span class 에 할당하였다. 그러면 렌더링 과정에서 vue.js 가 자동으로 컴포넌트 단위로 할당해준다.

<span data-v-0904fc8e="" data-v-7a7a37b1="" class="main">MessageTest</span>

.main[data-v-0904fc8e] { background: red; }

이는 웹 브라우저를 로드한 뒤 F12 개발자 도구로 들어가보면 속성 태그가 생긴 것과 CSS 조건 사항이 추가되어 적용된 것을 확인할 수 있다.

이외 @click 을 통해 클릭 이벤트를 추가할 수도 있는데, 이는 다음 게시글에서 자세히 설명한다.