Component(컴포넌트)란

컴포넌트

 - View, Data, Code의 세트

 - 컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재함

 - 컴포넌트의 가장 큰 특징은 재사용이 가능하드는 점이다. 즉, 다른 컴포넌트에 import해서 사용할 수 있다.

 - Vue에서 컴포넌트는 우리가 보는 페이지 자체일 수도 있고, 페이지 내의 특정 기능 요소일 수 있다.

 

컴포넌트 기본 구조

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

 - <template> : view에 해당하는 html 코드를 작성하는 영역

 - name : 컴포넌트 이름을 등록. 이름을 등록하지 않아도 사용하는 것에는 지장이 없다.

 - components : 외부 컴포넌트를 사용하게 되면 해당 컴포넌트를 import한 후, 이곳에 배열로 등록해줘야 함

 - data : html코드와 Javascript 코드에서 전역 변수로 사용하기 위해 선언하는 데이터. 데이터 바인딩을 통해 화면에 해당하는 html과 코드에 해당하는 Javascript 간의 양방향 통신이 가능하도록 한다. 데이터 프로퍼티에 정의된 변수는 this를 통해서 접근해야 한다.

 - setup : 컴포지션API를 구현하는 메소드

 - created : 컴포넌트가 생성되면 실행됨

 - mounted : 템플릿에 작성한 HTML코드가 랜더링 된 후 실행됨

 - unmounted : 컴포넌트를 빠져나갈 때 실행됨

 - methods : 컴포넌트 내에서 사용할 메소드를 정의하는 곳. 이곳에 작성된 메소드는 this를 통해서 접근해야 함

 

Lifecycle

kr.vuejs.org