JavaScript/vue

🔥component - 부품으로 정리

dev_jiwon 2022. 12. 13.

component - 부품으로 정리

SPA(Single Page Application)는 간단히 만들기 위함이지만, 규모가 커지면 복잡해진다.
이 때, “같은 종류의 처리를 하는 부분을 컴포넌트로 정리”하면 보기 좋고 이해하기 쉬워진다.

HTML의 일부분을 오브젝트로 정리하는 것은 template 오브젝트를 사용한다.

그리고 오브젝트에 이름(컴포넌트 태그명)을 붙인 것을 “컴포넌트”라고 한다.

<my-component></my-component>
// 준비된 컴포넌트가 표시된다.

컴포넌트 만드는 방법

전역 컴포넌트로 등록하는 방법

Vue.component('컴포넌트태그명', {
	template: 'HTML부분'
})

로컬 컴포넌트에 등록하는 방법

var 컴포넌트의 오브젝트명 = {
	template: 'HTML부분'
}

new Vue({
	el: '#app',
	components: {
		'컴포넌트태그명': 컴포넌트 오브젝트명
	}
})

**컴포넌트 네이밍법

컴포넌트의 오브젝트명은 JavasScript의 클래스명에 해당되므로 “MyComponent”의 파스칼 표기법으로, 컴포넌트 태그명은 HTML에서 사용할 이름으로 “my-component”의 케밥 표기법으로 작성

예제1 - 컴포넌트를 만들어서 표시하는 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        .my-comp{
            width: 300px;
            background-color: #ffffe0;
            border: solid;
            border-color: darkorange;
            border-radius: 8px;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h2>컴포넌트를 만들어서 표시하는 예제</h2>
    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <script>
        var MyComponent = {
            template: '<p class="my-comp">Hello</p>'
        }
        new Vue({
            el: '#app',
            components: {
                'my-component': MyComponent
            }
        })
    </script>
</body>
</html>

예제2 - 컴포넌트의 data를 function으로 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        .my-comp{
            width: 300px;
            background-color: #ffffe0;
            border: solid;
            border-color: darkorange;
            border-radius: 8px;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h2>각각 다른 카운팅을 하는 컴포넌트 예제</h2>
    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <script>
        var MyComponent = {
            template: '<p class="my-comp">카운터 <button v-on:click="addOne">추가</button> {{ count }}</p>',
            data: function() {
                return {
                    count: 0
                }
            },
            methods: {
                addOne: function() {
                    this.count++;
                }
            },
        }

        new Vue({
            el: '#app',
            components: {
                'my-component': MyComponent
            }
        })
    </script>
</body>
</html>

컴포넌트(component)

Template을 보완하여 만든 요소이다.
Template은 순수 HTML 코드만을 가지고 있지만, Component는 HTML템플릿과 더불어 데이터 셋팅, 함수정의 등 다양한 작업을 할 수 있다.
Component는 Vue.js의 핵심요소이다.
재사용이 가능하다
여러개의 Component 사용이 가능하다
data는 무조건 함수로 정의해야 된다
Vue.js에서 제공하는 컴포넌트를 이용해 다양한 템플릿을 만들어 사용할 수 있다.

참고

https://anko3899.tistory.com/229

컴포넌트 (전역 컴포넌트와 지역 컴포넌트)

컴포넌트Template을 보완하여 만든 요소다. Template은 순수 HTML코드만을 가지고 있지만 Component는 HTML템플릿과 더불어 데이터 셋팅, 함수 정의 등 다양한 작업을 할 수 있다.Component는 Vue.js의 핵심 요

anko3899.tistory.com

예제3 - 전역(글로벌) 컴포넌트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Component Registration</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button>컴포넌트 등록</button>
        <my-component></my-component>
    </div>

    <script>
        Vue.component('my-component', {
            template: '<div> 전역컴포넌트가 등록되었습니다!</div>'
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

예제4 - 지역(로컬) 컴포넌트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Component Registration</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button>컴포넌트 등록</button>
        <my-local-component></my-local-component>
    </div>

    <script>
        var cmp = {
            //컴포넌트 내용
            template: '<div> 지역 컴포넌트가 등록되었습니다!</div>'
        };

        new Vue({
            el: '#app',
            components: {
                'my-local-component': cmp
            }
        });
    </script>
</body>
</html>

저작자표시 비영리

'JavaScript > vue' 카테고리의 다른 글

count (0)	2022.08.09
Vue instance 생성 (0)	2022.08.09
Vue.js CDN / 설치(추후 추가) (0)	2022.08.09
Vue.js (0)	2022.08.09