[Vue.js] 3. 인스턴스 & 컴포넌트

𝙃𝙖𝙞𝙡𝙚𝙮·2021년 10월 29일

vue.js

Do it! Vue.js

목록 보기

3/6

03 화면을 개발하기 위한 필수단위 - 인스턴스 & 컴포넌트

03-1 뷰 인스턴스

(1) 뷰 인스턴스의 정의와 속성

뷰 인스턴스(instance)는 화면 개발에서 블록과 같은 어떤 '단위'라고 볼 수 있다.
뷰 인스턴스 형식은 아래와 같다.

new Vue({
	...
});

지난 실습에서 루트(최상위) 컴포넌트 data 속성 얘기하면서 봤던 템플릿이다.
저게 인스턴스였고만,,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Sample</title>
</head>
<body>
  <div id="app">  <!-- view 인스턴스가 그려질 지점 -->
    {{ message }} <!-- 데이터 속성에서 정의된 message 값이 연결됨 -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 인스턴스 start
    new Vue({
      el: '#app',                 //el속성      : view 인스턴스가 그려질 지점 지정
      data : {                    //데이터 속성  : message 값 정의 했음
        message : 'Hello Vue.js!'
      }
    });
    // 인스턴스 end
  </script>
</body>
</html>

여기서 new Vue()로 인스턴스를 생성할 때, Vue는 생성자라고 한다. 이는 vue 라이브러리가 로딩되고 나면 접근 가능하다. (로딩 안되면 {{message}}로 출력됨)
생성자를 사용하는 이유는 생성자에 구현된 기능의 재사용성을 위함이다.

(2) 뷰 인스턴스 옵션 속성

이외에도 아래와 같이, 여러가지 미리 정의되어 있는 속성들을 사용할 수 있다.

new Vue({
      el: '#app',                 //el속성      : view 인스턴스가 그려질 지점 지정
      data : {                    //데이터 속성  : message 값 정의 했음
        message : 'Hello Vue.js!'
      },
      template: ,                 // 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
      methods : ,                 // 화면 로직제어 관련 속성
      created :                   // 뷰 인스턴스 생성되자마자 실행할 로직을 정의할 수 있는 속성
    });

(3) 뷰 인스턴스의 유효 범위

만약 위 예시들과 같은 Vue 인스턴스 범위를 아래와 같이 벗어난다면 어떻게 될까?

<div id="app">  <!-- view 인스턴스가 그려질 지점 -->

</div>
{{ message }}

이렇게 실행한다면 인스턴스 유효 범위에 벗어났기 때문에, message 속성 값이 Hello Vue.js!로 바뀌지 않고 그대로 출력될 것이다.

(4) 뷰 인스턴스 라이프 사이클

beforeCreate : 인스턴스 생성 후, 가장 처음 실행되는 라이프 사이클 단계
created : data, methods 속성에 정의된 값에 접근 가능하기 때문에, 서버에 데이터를 요청하여 받아오는 로직(ex. HTTP 통신)을 수행하기 적합함
beforeMount : el속성에 지정한 dom에 인스턴스 부착 전에 호출되는 단계
mounted : el속성에 지정한 dom에 인스턴스 부착 후 호출되는 단계로, template 속성에 정의한 돔에 접근가능하여 화면 요소를 제어하는 로직을 수행하기 적합함
beforeUpdate : 인스턴스에 정의한 속성들이 화면에 치환되며, 변경 예정인 데이터에 접근 가능하여 이와 관련된 로직을 미리 넣을 수 있음
updated : 데이터 변경 후 가상 dom으로 화면을 다시 그리고 나면 실행되는 단계로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다. 이 로직에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 한다. 따라서 데이터 값을 갱신하는 로직은 가급적 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소(dom)와 관련된 로직을 추가하는게 좋다.
beforeDestory : 뷰 인스턴스 파괴 직전 단계로, 뷰 인스턴스의 데이터를 삭제하게 좋은 단계
destroyed : 뷰 인스턴스 파괴 후 호출되는 단계로, 정의된 모든 속성과 하위 인스턴스 모두 파괴됨

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Lifecycle</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data : {
        message: 'Hello Vue.js!'
      },
      beforeCreate : function() {
        console.log("beforeCreate");
      },
      created : function() {
        console.log("created");
      },
      mounted : function() {
        console.log("mounted");
      },
      updated : function() {
        console.log("updated");
      }
    });
  </script>
</body>
</html>

위 코드를 Console로 확인하면 beforeCreate > created > mounted가 출력되어 있다. 만약 mounted 단계에서 데이터를 변경한다면?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Lifecycle</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data : {
      message: 'Hello Vue.js!'
    },
    beforeCreate : function() {
      console.log("beforeCreate");
    },
    created : function() {
      console.log("created");
    },
    mounted : function() {
      console.log("mounted");
      this.message = 'Hello Vue!'; //message 값 변경
    },
    updated : function() {
      console.log("updated");
    }
  });
</script>
</body>
</html>

아까는 보이지 않던 updated 로그가 출력된다.

03-2 뷰 컴포넌트

(1) 컴포넌트란?

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미한다.

(2) 컴포넌트 등록하기

전역 컴포넌트 등록

Vue.component('컴포넌트 이름', { 
	//컴포넌트 내용
});

컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그 이름
컴포넌트 내용 : HTML 요소로 변환될 때 표시될 속성으로, template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Registration</title>
</head>
<body>
  <div id="app">
    <button>컴포넌트 등록</button>
    <my-component></my-component> <!--전역 컴포넌트 표시-->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('my-component', {
      template : '<div>전역 컴포넌트가 등록 되었습니다!</div>'
    });

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

</body>
</html>

지역 컴포넌트 등록

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Registration</title>
</head>
<body>
<div id="app">
  <button>컴포넌트 등록</button>
  <my-local-component></my-local-component> <!--지역 컴포넌트 표시-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var cmp = {
    //컴포넌트 내용
    template : '<div>지역 컴포넌트가 등록되었습니다!</div>'
  };

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

</body>
</html>

지역과 전역 컴포넌트의 차이

03-3 뷰 컴포넌트 통신

𝙃𝙖𝙞𝙡𝙚𝙮

ෆ 𝓋𝒾𝓈 𝓉𝒶 𝓋𝒾𝑒 ෆ

이전 포스트

[Vue.js] 2. 첫 번째 프로젝트

다음 포스트