[ VueJS 로 프론트엔드 개발 ] 컴포넌트 정의 및 태그 생성, 렌더링 - Whitmem
[ VueJS 로 프론트엔드 개발 ] 컴포넌트 정의 및 태그 생성, 렌더링
VueJS 개발 2025-06-07 20:22 게시 d334b97f48c9008c2439
0
0
3
이 페이지는 외부 공간에 무단 복제할 수 없으며 오직 있는 그대로 게시되며 부정확한 내용을 포함할 수 있습니다. 법률이 허용하는 한 가이드 라인에 맞춰 게시 내용을 인용하거나 출처로 표기할 수 있습니다.This page is not to be distributed to external services; it is provided as is and may contain inaccuracies.
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 가 자동으로 컴포넌트 단위로 할당해준다.
이는 웹 브라우저를 로드한 뒤 F12 개발자 도구로 들어가보면 속성 태그가 생긴 것과 CSS 조건 사항이 추가되어 적용된 것을 확인할 수 있다.
이외 @click 을 통해 클릭 이벤트를 추가할 수도 있는데, 이는 다음 게시글에서 자세히 설명한다.
댓글 0개
댓글을 작성하는 경우 댓글 처리 방침에 동의하는 것으로 간주됩니다. 댓글을 작성하면 일회용 인증키가 발급되며, 해당 키를 분실하는 경우 댓글을 제거할 수 없습니다. 댓글을 작성하면 사용자 IP가 영구적으로 기록 및 부분 공개됩니다.
확인
Whitmemit 개인 일지 블로그는 개인이 운영하는 정보 공유 공간으로 사용자의 민감한 개인 정보를 직접 요구하거나 요청하지 않습니다. 기본적인 사이트 방문시 처리되는 처리 정보에 대해서는 '사이트 처리 방침'을 참고하십시오. 추가적인 기능의 제공을 위하여 쿠키 정보를 사용하고 있습니다. Whitmemit 에서 처리하는 정보는 식별 용도로 사용되며 기타 글꼴 및 폰트 라이브러리에서 쿠키 정보를 사용할 수 있습니다.
이 자료는 모두 필수 자료로 간주되며, 사이트 이용을 하거나, 탐색하는 경우 동의로 간주합니다.