Vue 컴포넌트

컴포넌트
view, Data, Code의 세트
컴포넌트의 가장 큰 특징은 재사용이 가능하다.
페이지 자체일 수도 있고, 페이지 내의 특정기능 요소일 수도 있습니다.

Vue CLI를 이용해서 프로젝트를 최초로 생성했을 때 src 폴더 밑에 components 폴더가 있는 것을 볼 수 있습니다.
라우터 설정 시, 보는 views 폴더가 있습니다.

views 폴더에 우리가 페이지라고 부르는 화면 하나하나에 해당하는 vue 컴포넌트 파일을 생성하고, components 폴더에는 다른 vue 파일에서 호출해서 공통으로 사용할 수 있는 vue 컴포넌트 파일을 생성하고 관리합니다.

컴포넌트 구조

뷰 컴포넌트 내에는 name, components, data, computed 같은 기본 프로퍼티 외에도 뷰 컴포넌트가 생성되고 종료되기까지 발생하는 라이프사이클 훅에 해당하는 메소드 등이 있습ㄴ디ㅏ.

<template> // html 코드를 작성하는 영역 
	<div></div> 
</template>
<script>
	export default{
    	name: '', // 컴포넌트 이름 
        components: {}, // 외부 컴포넌트 임포트 후 배열로 등록 
        data(){ // html 코드와 자바스크립트 코드에서 전역변수로 사용하기 위해 선언하는 데이터 -> 데이터 양방향 바인딩에 사용 
        	return{
            	sampledata: ''
            ]
        },
        setup() {}, // 컴포지션 API 구현 메소드 
        created() {}, // 컴포넌트가 생성되면서 실행 
        mounted() {}, // HTML 코드가 랜더링 된 후 실행 
        unmounted() {}, // 컴포넌트를 빠져나갈 때 실행
        method: {} // 컴포넌트 내에서 사용할 메소드 정의 
    }
</script>

데이터 바인딩

vue는 양방향 데이터 바인딩을 지원합니다.

양방향 데이터 바인딩
모델에서 데이터를 정의한 후 뷰와 연결하면 모델과 뷰 중 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 반영되는 것