728x90

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.


참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Package]Vue.js


Vue에서는 컴포넌트라는 것을 제공한다.

프로그래밍에서 컴포넌트라는 것은 여러가지를 묶어서 작은 단위로 둔것이다.

Vue에서도 똑같다. Vue에서의 컴포넌트는 html+js+css+vue의 요소를 잘게 분리해둔것이라고 생각하면된다.

즉 우리가 이걸 분리해서 작은 컴포넌트로 만들게 되면 나중에 다시 사용할 수 있는것이다.


컴포넌트는 두종류가 있다. 로컬 컴포넌트와 글로벌 컴포넌트가 존재한다.

먼저 글로벌 컴포넌트부터 보도록 하자.


글로벌 컴포넌트


<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <simple-component v-bind:initial-counter="counter"></simple-component>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script>
    Vue.component('simple-component', {
        props: ['initialCounter'],
        template: '<button @click="addCounter">{{counter}}</button>',
        data: function () {
            return {
                counter: this.initialCounter
            };
        },
        methods: {
            addCounter: function () {
                this.counter += 1;
            }
        }
    });
    new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    });
</script>
</html>

전체코드는 위와 같다. html전체적으로 보면 별 양은 없다.

사실 simple-component라는 우리가 만든 태그를 제외하면 아무것도 없다고 할 수 있다.

그리고 Vue를 사용하기 위해서 Vue인스턴스를 생성하는 것은 기존에도 했던것이다.

추가된 코드는  아래와 같다.


Vue.component('simple-component', {
    props: ['initialCounter'],
    template: '<button @click="addCounter">{{counter}}</button>',
    data: function () {
        return {
            counter: this.initialCounter
        };
    },
    methods: {
        addCounter: function () {
            this.counter += 1;
        }
    }
});

컴포넌트는 두개의 인자를 받는다.

첫번째로는 컴포넌트의 이름, 두번째로는 컴포넌트 자체의 구성을 받는다. 이역시 js object로 되어있다.

컴포넌트는 크게 보면 위의 4가지 요소들로 되어있다.


props : 컴포넌트의 속성, 부모 컴포넌트가 자식 컴포넌트에게 전달할 수 있다.

template : 외부에서 이 컴포넌트를 호출할때 렌더링될 템플릿이다.

data : 컴포넌트 내부에서 쓰일 변수

methods : 컴포넌트 내부에서 쓰일 메소드


props역시 data처럼 변수로 사용될 수 있다.

위의 코드를 data를 사용하지 않고도 완성시킬 수는 있다.

단 위의 코드를 props를 쓰지 않고 구현할 수는 없다.

오직 props만 오직 컴포넌트끼리의 데이터 전달이 가능하기 때문이다.

따라서 전달될 데이터가 있다면 props를 통해서만 전달될 수 있다.

가령 위의 예제를 한번 보도록하자.


<div id="app">
    <simple-component v-bind:initial-counter="counter"></simple-component>
</div>

여기서 두가지의 컴포넌트가 쓰인걸 알 수 있다.

먼저 app을 잡아서 vue 템플릿을 적용시키는 컴포넌트가 존재한다.

그 하위 컴포넌트로 simple-component가 존재한다. 그리고 initialCounter의 변수에 counter라는 값을 넣었다.

여기서 또한 주요한점이 initial-counter라는 속성인데 이는 우리가 컴포넌트에서 선언했던 initialCounter와 동일하다.

자바스크립트 내에서 카멜캐이싱으로 선언한 변수는 html내부에서는 케밥 케이싱으로 자동 변환된다.

따라서 둘은 동일하다. 그 값에 우리는 초기값으로 counter를 넣었다.

여기서 counter는 부모 컴포넌트에서 선언한


new Vue({
    el: '#app',
    data: {
        counter: 0
    }
});

를 의미한다.


즉 부모 컴포넌트의 값을 자식에게 속성값을 붙이는 것으로 던져준 것이다.

이제 값을 전달받고나면 simple-component를 렌더링한다.


template: '<button @click="addCounter">{{counter}}</button>'

simple-component는 button이며 이벤트로 addCounter를 onclick으로 가지고 화면에 보여줄 mustache는 counter이다.

여기서 counter는 무엇일까? 이때 mustache에는 props와 data를 둘다 쓸 수 있다.

우리는 conuter를 data에 정의했으므로 data쪽의 counter를 보자.


data: function () {
    return {
        counter: this.initialCounter
    };
},

보다시피 counter은 initialCounter로 초기화 되어있다.

initialCounter는 상위 컴포넌트의 counter로 초기화되었고 상위 컴포넌트의 counter는 0이 였다.

따라서 위의 값은 초기는 0이 되는 것이다.



로컬 컴포넌트


글로벌 컴포넌트는 해당에 사용하고 있는 모든 vue 컴포넌트들이 사용할 수 있다.

만약 특정 컴포넌트를 로컬에서 사용하고 싶다면 아래와 같이 만들어야 한다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <simple-component v-bind:initial-counter="counter"></simple-component>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script>
    var simpleComponent = {
        props: ['initialCounter'],
        template: '<button @click="addCounter">{{counter}}</button>',
        data: function () {
            return {
                counter: this.initialCounter
            };
        },
        methods: {
            addCounter: function () {
                this.counter += 1;
            }
        }
    }
    new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        components: {
            'simple-component': simpleComponent
        }
    });
</script>
</html>

여기서 컴포넌트를 새로만드는 과정이 있다.

컴포넌트를 새로만들고 이를 내가 넣고싶은 컴포넌트에 components속성으로 넣어준다.

그러면 끝난다.


글로벌로 사용하면 어떠한 컴포넌트든 사용할 수 있기 때문에 네임스페이스가 겹칠 수 있다.

따라서 보통의 경우 로컬로 등록하는일이 많다.

다만 기본적으로 글로벌로 사용해야할 것 같다면 글로벌로 사용하는 경우도 흔하다.


하지만 주의할점이 있는데 이렇게 js로 만든 vue컴포넌트는 실전에서는 보기 드물다.

그 이유는 뭐 여러가지가 있긴한데 지금 단계에서 자세히 알려주기는 힘들고 vue-13강의 cli와 cumponent편을 보는 것이 좋다.



저작자표시

'Programming > JavaScript-Vue' 카테고리의 다른 글

[Vue-12]값의 동적 변경과 v-model(맛보기편)  (0) 2018.09.26
[Vue-11]Router  (0) 2018.05.12
[Vue-09]이벤트 수식어  (0) 2018.02.23
[Vue-08]이벤트  (0) 2018.02.20
[Vue-07]배열(Array) 및 연관배열(Object) 사용시 주의 사항  (2) 2018.02.20

+ Recent posts

티스토리툴바