[Vue.JS] Vue 인스턴스

Vue.JS 공식 문서를 따르면, Vue는 엄격하게 MVVM 패턴과 관계되어 있지 않지만, MVVM 패턴에 영감을 받았다고 합니다.([디자인패턴] MVC, MVP, MVVM 비교 참고) MVVM 패턴의 특징 중 하나가 데이터 바인딩입니다. Model이 업데이트 되면, 데이터 바인딩으로 인해 View가 업데이트 됩니다.

Vue 인스턴스 만들기

Vue 어플리케이션을 만드는 것은 Vue 인스턴스를 만드는 것에서 시작됩니다. Vue 어플리케이션의 구조는 루트 Vue 인스턴트 밑에 하위 컴포넌트가 붙는 컴포넌트 트리 구조입니다.

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Vue 인스턴스를 생성 할 때, data, method, 라이프사이클 콜백(created, mounted, destoryed 등의..) 옵션들을 포함 하는 옵션 객체를 전달 해야 합니다.

new Vue({
  data() {
    // ... 화면을 그리는데 사용되는 데이터들
  },
  methods: {
    // ... 화면을 그리는데 사용되는 메소드들
  },
  created() {
    // ... 컴포넌트가 생성된 후 호출되는 라이프사이클 콜백
  },
  mounted() {
    // ... 컴포넌트가 마운트 된 후 호출되는 라이프사이클 콜백
  },
  destoryed() {
    // ... 컴포넌트가 언마운트 된 후 호출되는 라이프사이클 콜백
  },
  components: {
    // ... 화면을 그리는데 사용되는 하위 컴포넌트들
  }
});

Vue 인스턴스를 생성할 때 넘겨줘야 하는 옵션 중 몇가지를 살펴보도록 하겠습니다. 생명주기 콜백함수들도 옵션들 중에 하나인데, 생명주기 콜백함수들은 많기도하고, 중요하기 때문에 다음 포스팅에 이야기 하려고 합니다. 각각의 옵션들의 사용방법도 이후 포스팅에서 더 자세히 이야기 하도록 하고, 이번에는 간단한 선언 방법만 이야기 하겠습니다.

1) data (Object | Function)

화면을 그리는데 사용하는 데이터 객체를 리턴하는 함수이거나 혹은 데이터 객체 그 자체가 될 수 있습니다. Vue 인스턴스가 아닌 하위 컴포넌트에서 사용될 때는 반드시 함수형이여야 합니다.

{
  value1: 'this is value 1', // value1, value2를 객체의 속성이라고 이야기 하겠습니다.
  value2: 'this is value 2'
}

data 객체의 속성들이 변경 되면(함수일 경우 리턴하는 데이터 객체의 속성), 화면이 자동으로 갱신됩니다.

new Vue({
  data() {
    return {
      // 이 값들이 변경되면 화면이 자동으로 갱신됩니다.
      msg: '함수형 data 입니다.',
      desc: '하위 컴포넌트에서 data는 반드시 함수형이여 합니다.'
    };
  }
  /* 혹은
  data: {
    msg: '객체형 data 입니다.'
    desc: 'Vue 인스턴스를 생성 할 때는 객체를 사용해도 됩니다.'
  }
  */
});

2) props (Array | Object)

부모 컴포넌트로부터 전달 받은 property들의 Array 혹은 Object입니다.

<div>
  <HellowWord title="Hello Vue" desc="Vue Instance" />
</div>

부모 컴포넌트에서 하위 컴포넌트로 props 넘겨주기

위의 코드와 같이 하위 컴포넌트를 호출하면 title와 desc를 props의 Array에 추가해 주어야 하위 컴포넌트에서 title과 desc를 사용할 수 있게 됩니다. 유효성 검사 및 기본값과 같은 고급 옵션을 사용하기 위해 Object를 사용할 수도 있습니다.

{
  props:['title', 'desc'],
  /* 혹은 고급 옵션을 사용하기 위한 Object
  props: {
    title: String, // 타입 설정
    desc: {
      required: true, // 필수값 설정
      default: '설명이 없습니다.' // 기본 값 설정
    }
  } */
}

3) computed ({ [key: string]: Function | { get: Function, set: Function } })

data를 미리 계산한 값들을 나타내는 함수들을 모아둔 객체입니다. setter을 만들지 않았다면 기본적으로 getter 기능만 제공합니다.

{
  date() {
    return() {
      msg: '함수형 data 입니다.',
      desc: '하위 컴포넌트에서 data는 반드시 함수형이여 합니다.'
    }
  }
  computed: {
    print() {
      return this.msg + ' ' + this.desc
    }
  }
}

4) watch ({ [key: string]: sting | Function | Object | Array })

watch는 data와 한쌍을 이루게 됩니다. 즉, data에 표현된 key와 watch에 표현된 key의 이름은 동일해야 합니다. data의 value 값이 변경이 되면, watch의 key의 value에 할당된 콜백이 실행됩니다.

{
  data() {
    return {
      msg: '메시지입니다'
    }
  }
  watch: {
    msg() {
      console.log('data의 msg가 수정되면 호출됩니다.');
    }
  }
}

5) methods ({ [key: string]: Function })

화면을 표현하는데 사용하는 모든 메소드들이 모여 있는 곳입니다.

{
  data() {
    return {
      a: 1
    };
  }
  methods: {
    plus() {
      this.a++;
    }
  }
}

참고

• https://kr.vuejs.org/v2/guide/instance.html