Vue.js 인스턴스 & 컴포넌트

DevHwanㅤ

2018. 9. 9. 09:27

뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 - 뷰 인스턴스

1
2
3
4
new Vue({
...
})
 
cs

뷰 인스턴스의 사용은 위 형식으로 뷰 인스턴스를 생성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
  <head>
    <title>Vue</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Vue.js!'
        }
      });
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

vue.js 텍스트를 화면에 표시하기 위해 new Vue 뷰 인스턴스를 생성하고 인스턴스 안에 el 속성으로 뷰 인스턴스가 나올 지정후

data 속성에 message 값을 넣어 화면의 {{message}}에 연결했다.

new Vue()로 인스턴스를 생성할 떄 Vue를 생성자라고 하는데. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근 가능하다.

뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하기 위해 쓴다.

인스턴스 속성

인스턴스를 성생할 때 재정의할 data, el, template 등의 속성을 의미하는데 위의 예제에서는 data라는 미리 정의되어 있는 속성을

사용하고 meesage라는 새로운 속성을 안에 추가하고 Vue.js 라는 값을 주었다. el 속성도 미리 정의되어 있고 뷰로 만든 화면이

만들어지는 시작점을 의미한다.

template , methods , created 등 미리 정의되어 있는 속성을 사용 가능하다.

인스턴스 라이프 사이클

라이프 사이클은 : 일반적으로 애플리케이션이 가지는 생명 주기 이다.

Vue에서 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이플 사이클 속성에서

실행되는 커스텀 로직을 라이프 사이클 훅이라고 한다.

created , beforeCreate, beforeMount, mounted 등 인스턴스의 생성, 변경 , 소멸과 관련되 총 8개가 있다.

단계 : 인스턴스이 생성 > 생성된 인스턴스를 화면에 부착 > 화면에 부착된 인스턴스의 내용이 갱신 > 인스턴스가 제거되는 소멸

크게 4단계로 이루어진다. 인스턴스 라이플 사이클에 맞춰 원하는 로직을 추가하여 원하는 시점에 실행할수 있다.

뷰 컴포넌트

컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화해서 일괄적인 패턴으로

개발 할 수 있다. 그리고 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기 편리하다.

뷰에서 화면을 구성할 때 흔히 사용하는 내비게이션 바 , 테이블 , 리스트 , 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어

컴포넌트로 관리한다. 컴포넌트 간의 관계는 자료구조의 트리 모양과 유사하다.

컴포넌트를 등록하는 방법은 전역(Global)과 지역(Local) 두 가지가 있다.

지역은 특정 범위 내에서만 사용 , 전역은 뷰로 접근 가능한 모든 범위에서 사용 가능하다.

Vue.component()로 전역 컴포넌트를 1개 등록하고 출력하는 예제이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
  <head>
    <title>Vue Component</title>
  </head>
  <body>
    <div id="app">
      <button>컴포넌트 등록</button>
            <my-component></my-component>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      Vue.component('my-component', {
        template: '<div>전역 컴포넌트</div>'
      });
 
      new Vue({
        el: '#app'
      });
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

지역 컴포넌트 는 인스턴스에 컴포넌트 속성을 추가하고 등록 할 컴포넌트 이름과 내용을 정의해야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
  <head>
    <title>Vue Component</title>
  </head>
  <body>
    <div id="app">
      <button>컴포넌트 등록</button>
      <my-local-component></my-local-component>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      var cmp = {
        // 컴포넌트 내용
        template: '<div>지역 컴포넌트</div>'
      };
 
      new Vue({
        el: '#app',
        components: {
          'my-local-component': cmp
        }
      });
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[TypeScript ] 쓰는이유? 사용해보기 (1)	2022.01.28
Eslint 초기 설정하기 (0)	2021.02.01
Ajax 와 JSON 서버와 통신하기 (0)	2018.08.23
[javaScript] 승부차기 게임 만들기 - 3 (0)	2018.08.19
[JavaScript] 승부차기 게임 만들기 - 2 (0)	2018.08.14

오늘도 삽질