vue.js 기본

2024. 1. 19. 09:52ㆍ카테고리 없음

Vue.js에서 "Vue 인스턴스"는 Vue.js 애플리케이션의 기본 빌딩 블록이다. Vue 인스턴스는 Vue.js 라이브러리를 사용하여 생성되는 객체로서, 애플리케이션의 데이터, 메서드, 라이프사이클 훅 등을 포함. 각 Vue 인스턴스는 독립적이며, 하나의 페이지에 여러 개의 Vue 인스턴스를 가질 수 있다

 

Vue인스턴스
new Vue({
  // instance option properties
});

Vue인스턴스는 보통  다음과 같이 생성하며,

객체 안에는  인스턴스 옵션 속성이 포함된다. 사용되는 주요옵션은 아래와 같다.

  • el: Vue 인스턴스가 마운트될 HTML 요소를 지정합니다.
  • data: 인스턴스의 데이터 속성을 정의합니다.
  • methods: 인스턴스의 메서드를 정의합니다.
  • computed: 계산된 속성을 정의합니다.
  • watch: 데이터의 변화를 감시하고, 변화가 감지되면 특정 동작을 수행합니다.
  • template: Vue 인스턴스가 렌더링할 마크업을 정의합니다. 인스턴스가 특정 HTML요소에 마운트 되지 않고 자체적으로 렌더링된 내용을 사용합니다.
  • methods: Vue인스턴스에서 사용될 메서드를 정의합니다. 주로 이벤트 핸들러등으로 사용되며, 템플릿 내부에서 호출될 수 있습니다.
  • 라이프 사이클 훅(Life Cycle Hook):Vue 인스턴스의 생명주기 동안 특정 시점에 실행되는 함수들로, 애플리케이션의 초기화, 렌더링, 업데이트, 소멸 등의 단계에서 사용됩니다. 주요 라이프사이클 훅은 다음과 같습니다:
    • beforeCreate: 인스턴스가 생성되고 데이터가 초기화되기 전에 호출됩니다.
    • created: 인스턴스가 생성되고 데이터가 초기화된 후에 호출됩니다.
    • beforeMount: 템플릿이 마운트되기 전에 호출됩니다.
    • mounted: 템플릿이 마운트된 후에 호출됩니다.
    • beforeUpdate: 데이터가 변경되기 전에 호출됩니다.
    • updated: 데이터가 변경된 후에 호출됩니다.
    • beforeDestroy: 인스턴스가 파괴되기 전에 호출됩니다.
    • destroyed: 인스턴스가 파괴된 후에 호출됩니다.

Vue 인스턴스가 생성될때는 아래의 초기화 작업을 수행한다.

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

이 초기화 작업 외에도 개발자가 의도하는 커스텀 로직을 아래와 같이 추가할 수 있다.

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

위 created 이외에도 라이프싸이클 단계에 따라 mounted, updated, destroyed 등을 사용할 수 있다. 이 라이프싸이클 초기화 메서드로 커스텀 로직을 수행하기 때문에 뷰에서는 따로 Controller를 갖고 있지 않다.

 

Vue Components

 

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

Vue 컴포넌트 예시

 

컴포넌트는 Vue 인스턴스처럼 옵션을 사용하여 정의된다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="changeContent">내용 변경</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue 컴포넌트 예제',
      content: '컴포넌트는 재사용 가능한 Vue 인스턴스입니다.'
    };
  },
  methods: {
    changeContent() {
      this.content = '내용이 변경되었습니다!';
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

각 부분에 대한 설명은 아래와 같다.

  • <template>: 컴포넌트의 마크업을 정의하는 부분이다. 이 부분에는 HTML과 Vue 템플릿 문법을 사용하여 UI를 나타낸다.
  • <script>: 컴포넌트의 JavaScript 로직을 정의하는 부분이다. export default를 사용하여 컴포넌트를 내보내고, data 옵션을 통해 컴포넌트의 상태를 정의하고, methods 옵션을 통해 메서드를 정의한다.
  • <style scoped>: 컴포넌트의 스타일을 정의하는 부분이다. scoped를 사용하면 해당 스타일이 현재 컴포넌트에만 적용된다.

이러한 컴포넌트 단위를 사용하려면 부모 컴포넌트나 Vue인스턴에스에서 등록하고 사용하는게 보통이다.

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from '등록한 컴포넌트 주소';

export default {
  components: {
    MyComponent
  }
};
</script>

위에서 MyComponent를 components 옵션을 통해 등록하고, <my-component></my-component>로 해당 컴포넌트를 사용할 수 있습니다.

이렇게 하면 App.vue에서 MyComponent를 사용하는 간단한 Vue 애플리케이션의 구조가 완성된다.

 

또한 두가지로 등록 방식이 존재한다.

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

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

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

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

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

 

부모와 자식 컴포넌트 관계

컴포넌트 관계도에서 상-하 관계에 있는 컴포넌트의 통신은

  • 위에서 아래로는 데이터(props)를 내리고
  • 아래에서 위로는 이벤트를 올린다(event emit)

 

Props

 

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

<!-- 상위 컴포넌트 -->
<div id="app">
  <!-- 하위 컴포넌트에 상위 컴포넌트가 갖고 있는 message를 전달함 -->
  <child-component v-bind:propsdata="message"></child-component>
</div>
// 하위 컴포넌트
Vue.component("child-component", {
  // 상위 컴포넌트의 data 속성인 message를 propsdata라는 속성으로 넘겨받음
  props: ["propsdata"],
  template: '<p>{{ propsdata }}</p>'
});

// 상위 컴포넌트
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue! from Parent Component"
  }
});

 

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

 

 

같은 레벨의 컴포넌트 간 통신

 

동일한 상위 컴포넌트를 가진 하위 컴포넌트들 간의 통신은 아래와 같이 해야 한다.

  • Child(하위) -> Parent(상위) -> Children(하위 2개)

참고 : 컴포넌트 간의 직접적인 통신은 불가능하도록 되어 있는게 Vue 의 기본 구조

Event Bus

상위 - 하위 관계가 아닌 컴포넌트 간의 통신을 위해 Event Bus를 활용할 수 있다.

Event Bus를 사용하기 위해 새로운 뷰 인스턴스를 아래와 같이 생성한다.

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

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

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

// 화면 개발을 위한 인스턴스와 다른 별도의 인스턴스를 생성하여 활용
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
    });
  }
});

만약, eventBus의 콜백 함수 안에서 해당 컴포넌트의 메서드를 참고하려면 vm 사용

new Vue({
  methods: {
    callAnyMethod() {
      // ...
    }
  },
  created() {
    var vm = this;
    eventBus.$on("refresh", function(data) {
      console.log(this); // 여기서의 this는 이벤트 버스용 인스턴스를 가리킴
      vm.callAnyMethod(); // vm은 현재 인스턴스를 가리킴
    });
  }
});
Vue Routers

티스토리툴바