Vue.js 기초 - 컴포넌트

컴포넌트란?

컴포넌트란 한 마디로 View, Data, Code의 세트라고 생각하면 된다. 컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 JS코드 그리고 데이터가 존재한다. 컴포넌트의 가장 큰 특징은 재사용이 가능하다는 것이다. 즉, 한번 만들어둔 컴포넌트는 다른 컴포넌트에서 import를 해서 사용할 수 있다. Vue에서 컴포넌트는 우리가 화면에서 보는 페이지 자체일 수도 있고, 페이지 내의 특정 기능 요소일 수 있다.

Vue 프로젝트를 최초 생성했을 떄 src 폴더 밑에 components 폴더가 있는 것을 확인할 수 있다. 그런데 라우터 설정을 위해서 Vue-router를 추가하면 src 폴더 밑에 views 폴더가 생성된다. 실제 프로젝트에서는 views 폴더에 우리가 페이지라고 부르는 화면 하나하나에 해당하는 vue 컴포넌트 파일을 생성하고, components 폴더에는 다른 vue 파일에서 호출해서 공통으로 사용할 수 있는 vue 컴포넌트 파일을 생성하고 관리하게 된다.

• src/views폴더(페이지 전체를 이루는 vue 파일)
• src/components 폴더(재사용을 위한 화면의 일부 기능 요소에 해당하는 vue 파일)

둘 다 vue 입장에서는 모두 컴포넌트이고, 내부적으로 동일한 구조. 이렇게 물리적으로 프로젝트 폴더를 구분해서 사용하는 것이 관리 차원에서 효율적이다.

컴포넌트 구조 이해하기

컴포넌트 기본 구조

뷰 컴포넌트 내에는 name, components, data, computed 같은 기본 프로퍼티 외에도 뷰 컴포넌트가 생성이 되고 종료가 되기까지 발생하는 라이프사이클 훅에 해당하는 메소드 등이 있다. vue 컴포넌트 개발 시 자주 사용되는 기본 코드 구조를 snippet에 등록해서 사용하자.

<template>
  <div></div>
</template>
<script>
export default {
    name: '', //컴포넌트 이름
    components: {}, //다른 컴포넌트 사용 시 컴포넌트를 import하고, 배열로 저장
    data(){ //html과 자바스크립트 코드에서 사용할 데이터 변수 선언
        return {
            sampleData: ''
        };
    },
 setup() {},  // 컴포지션 API
 created() {},  // 컴포넌트가 생성되면 실행
 mounted() {},  // template에 정의된 html 코드가 랜더링된 후 실행
 method: {}     // 컴포넌트 내에서 사용할 메소드 정의
}
</script>

• <template> : view에 해당하는 html 코드를 작성하는 영역
• name : 컴포넌트 이름 등록, 등록하지 않아도 사용에 지장은 없음.
• components : 외부 컴포넌트를 사용하게 되면 해당 컴포넌트를 import 한 후, 이곳에 배열로 등록해줘야 한다.
• data : 데이터 프로퍼티는 html 코드와 자바스크립트 코드에서 전역 변수로 사용하기 위해 선언하는 데이터이다. 데이터 바인딩을 통해 화면에 해당하는 html과 코드에 해당하는 자바스크립트 간의 양방향 통신이 가능하도록 한다. 데이터 프로퍼티에 정의된 변수는 this를 통해서 접근해야 한다.
• setup : 컴포지션 API를 구현하는 메소드이다.
• created 컴포넌트가 생성되면 실행된다.
• unmounted : 컴포넌트를 빠져나갈 때 실행된다.
• method : 컴포넌트 내에서 사용할 메소드를 정의하는 곳이다. 이곳에서 작성된 메소드는 this를 통해서 접근해야 한다.

Snippet 설정

언어 선택

Vue.json 파일이 열린다. 아직 등록된 snippets이 없기 때문에 주석처리되어 나타난다.

등록된 스니펫 사용은 src/views폴더의 About.vue 폴더 내용을 지우고 vue를 치면

사진처럼 방금 만든 스니펫을 확인할 수 있다.