[Vue] Component

Component

공식문서 본 거는 블로그에 안 쓰기로 했는데.. 이건 중요한 개념이라 좀 적어두려고 썼다.

 

컴포넌트는 뷰에서 제공하는 강력한 기능 중 하나로, 미리 만들어놓은 템플릿 뭉탱이를 가져와서 사용함으로써 페이지 구성의 직관성을 키우고, 재사용성을 높일 수 있도록 돕는다.

 

컴포넌트는 크게 전역 컴포넌트와 지역 컴포넌트 두 가지로 구분할 수 있다.

 

<script>
    // 전역
    Vue.component('global-component'{
		template: '<div>content</div>'
    })
    
    // 로컬
    let app = new Vue({
    	el: '#app',
        components: {
        	'local-component' : {template: '<div>content</div>'} 
        }
    })
</script>

 

<div id="app">
    <global-component></global-component>
    <local-component></local-component>
</div>

 

출력 결과는

content

content

이런 식으로 나온다.

아마 리액트에도 있던 기능으로 알고 있는데, 리액트에서는 써본적이 없어서 두 개가 뭐가 다른지는 잘 모르겠다.

 

 

여기까지가 개요였고, 이제 글을 쓰고자 했던 중요한 이유인 props와 events에 대해 써볼 것이다.

 

컴포넌트는 기본적으로 Vue로 선언된 블럭 내부에서 동작하기 때문에, 필연적으로 부모-자식의 관계를 갖는다. 위의 예시로 보자면 app이 부모가 될 것이고, global-component와 local-component가 자식이 될 것이다. Vue는 동적으로 반응하는 페이지를 만들기 위해 사용하므로, 부모-자식간의 상태의 교환을 할 수 있는 수단이 필요하다. 이 때 사용되는것이 props와 events다.

 

부모-자식간 데이터 교환을 할 때, 순진하게 상태를 바로 전달할 수 있게 만들어 놓으면 결합이 강해지므로 유지관리가 어려워지고 재사용의 난이도가 상승한다.

그렇기 때문에 부모가 자식에게 제공하고싶은 데이터는 props로, 부모에게 보내고 싶은 메세지는 events로 관리하여 재사용을 용이하게 만들어준다.

 

이 두 개가 뭔지는 중요한일 생겨서 집가서 씀 ;;;;;