가볍게 문법과 개념 훑기

DAYEON·2021년 7월 1일

vue.js

Vue.js

목록 보기

3/3

이번 시간에는 가볍게 문법과 개념에 대해 훑어보려 합니다! 주요 개념들을 문법과 함께 살펴보도록 하겠습니다.😎

Vue Instance

인스턴스는 Vue.js로 화면을 개발하기 위해 생성해야 하는 필수 단위이다.

Vue Instance 생성자

생성자 함수를 사용하여 인스턴스를 생성하는 방법이다.

new Vue({
  // instance option properties
});

Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle hook 등 옵션 속성을 포함할 수 있다.

new Vue({
  // instance option properties
  template: "",
  el: "",
  methods: {}
  // ...
});

Vue Instance 라이프싸이클 초기화

인스턴스(객체)가 생성될 때 수행되는 초기화 작업

데이터 관찰
템플릿 컴파일
DOM에 객체 연결
데이터 변경 시 DOM 업데이트

이런식으로 초기화 작업 외, 개발자가 의도하는 커스텀 로직을 작성할 수 있다.

new Vue({
  data: {
    a: 1
  },
  created: function() {
    // this 는 vm 을 가리킴
    console.log("a is: " + this.a);
  }
});

vm이란 ViewModel의 약자라고 한다.

Vue Components

화면의 영역을 일정한 단위로 쪼개 분리시켜 재활용 가능한 형태로 관리하는 것이 컴포넌트이다.

컴포넌트 등록

<div id="app">
  <my-component></my-component>
</div>

new Vue({
  el: "#app",
  // 컴포넌트 등록 코드
  components: {
    // '컴포넌트 이름': 컴포넌트 내용
    "my-component": {
      template: "<div>A custom component!</div>"
    }
  }
});

Global Component

전역 컴포넌트 등록 방식이다.

Vue.component('my-component', {
  // 컴포넌트 내용
  template: '',
  ...
})

Local Component

지역 컴포넌트 등록 방식이다.

var cmp = {
  // 컴포넌트 내용
  template: '',
  ...
}

new Vue({
  components: {
    'my-cmp' : cmp
  }
})

부모와 자식 컴포넌트 관계

위에서 아래로는 데이터(props)를 내림

프롭스는 상위 컴포넌트에서 하위 컴포넌트로 내리는 데이터 속성을 의미한다.
모든 컴포넌트가 각 컴포넌트 자체의 스코프를 가지고 있어 다른 컴포넌트의 값을 바로 참조할 수 없기 때문에, 이것을 극복하고자 props를 사용한다.

주의할 점 :
props 변수 명을 카멜 기법으로 정의하면 html 태그에서 사용할 때는 케밥 기법(-)으로 선언해야 한다.

같은 레벨의 컴포넌트 간 통신은?:
동일한 사위 컴포넌트를 가진 하위 컴포넌트들 간의 통신은
(하위)->(상위)->(다른 하위)
👏다른 컴포넌트들 간의 직접적인 통신은 불가능하도록 되어 있는 것이 Vue의 기본 구조이다.

아래에서는 위로 이벤트를 올림(event emit)

Event Bus

상하 관계가 아닌 컴포넌트간의 통신을 위해서는 Event Bus를 활용한다.

// 화면 개발을 위한 인스턴스와 다른 별도의 인스턴스를 생성하여 활용
var eventBus = new Vue();

new Vue({
  // ...
});

이벤트를 발생시킬 컴포넌트에서 $emit()을 호출한다.

eventBus.$emit("refresh", 10);

이벤트를 받을 컴포넌트에서 $on() 이벤트를 수신한다.

// 이벤트 버스 이벤트는 일반적으로 라이프 사이클 함수에서 수신
new Vue({
  created: function() {
    eventBus.$on("refresh", function(data) {
      console.log(data); // 10
    });
  }
});