Vue js란 ?

Vue.js 란?

Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(Progressive framework)입니다.

 

다시 설명을 하자면 Vue는 뷰만을 다루는 단순한 라이브러리입니다.

기본적인 설계 방식으로 MVVM 패턴에 영감을 받았습니다.

"프레임워크는 어떤 경우든지 규모와 상관없이 단계적으로 유연하게 사용할수 있도록 설계되었습니다".

 

Vue.js 에서는 컴포넌트를 통해서 재사용을 할수도 있고 기존에 HTML , Javascript에 이미 익숙하다면 쉽게 사용이 가능합니다.

 

또한 리액티브 데이터 바인딩을 통해서 HTML 템플릿 안에서 대상 DOM 요소에 바인딩을 지정하여 해당 데이터가 변화가 일어날때마다 바인딩된 DOM 요소에 내용도 함께 업테이트를 진행합니다.

 

그리고 양방향 바인딩을 통하여 데이터의 동기화 상태를 유지할수가 있습니다.

 

따라서 핵심 라이브러리는 뷰 레이어에 초점을 맞추어서 나중에 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽게 설계되었습니다.

 

설치방법

Vue.js를 설치하는 방법은 여러 방법이 있지만 저는 Vue-cli을 통해서 구축을 하도록 하겠습니다.

 

설치

npm install -g @vue/cli
# OR
yarn global add @vue/cli

생성

vue create my-project
# OR
vue ui

생성이 된 후에는 npm run serve를 통해서 실행을 할수가 있습니다.

 

선언적 렌더링

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링을 할수가 있습니다.

따라서 다음과 같이 'HelloWorld.vue'을 변경합니다.

<template>
  <div class="hello">
     {{ message }}

     <input v-model="message">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      message: '안녕하세요 Vue!'
    }
  }
}
</script>

따라서 Vue.js 내부에서는 데이터와 DOM이 연결이 되어 반응형이 되었습니다.

그래서 해당 input값에 변경을 하면 값이 똑같이 업데이트 되는것을 볼수가 있습니다.

 

v-model은 아래에 설명드리도록 하겠습니다.

 

더이상 HTML과 직접 상호 작용을 할 필요가 없어졌습니다.

Vue 앱은 main.js 파일에 있는 app이라는 DOM 요소에 연결되어 DOM 요소를 완전히 제어합니다.

 

디렉티브

<template>
  <div class="hello">
     <span v-bind:title="message">
        내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
      </span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
    }
  }
}
</script>

위에 예제를 통해서 처음으로 v-bind (디렉티브) 속성을 만났습니다.

디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 부터 있고 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 

 

조건문과 반복문

<template>
  <div class="hello">
     <p v-if="seen">이제 나를 볼 수 있어요</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      seen: true
    }
  }
}
</script>

위에 예제를 통해서 엘리먼트가 표시되는지 여부를 제어할수가 있습니다.

seen이라는 값을 false을 할경우에 메시지가 사라지는것을 경험할수가 있습니다.

 

다음으로는 v-for 디렉티브를 사용하여 배열의 데이터를 바인딩하여 해당 배열에 내용을 표시하는데 사용할수가 있습니다.

<template>
  <div class="hello">
     <ol>
        <li v-bind:key="todo.id" v-for="todo in todos">
          {{ todo.text }}
        </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      todos: [
        { id: 0 , text: 'JavaScript 배우기' },
        { id: 1 , text: 'Vue 배우기' },
        { id: 2 , text: '무언가 멋진 것을 만들기' }
      ]
    }
  }
}
</script>

사용자 입력 핸들링

사용자가 앱과 상호 작용할수 있게 하기 위해서 v-on이라는 디렉티브를 사용하여 이벤트 리스너를 추가 할수가 있습니다.

 

<template>
  <div class="hello">
     <p>{{ message }}</p>
     <button v-on:click="reverseMessage">메시지 뒤집기</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
       message: '안녕하세요! Vue.js!'
    }
  },
  methods : {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

위에 작성한 코드는 click을 했을때 앱의 상태만을 업데이트 하여 DOM을 건들지 않고도 Vue에 의해서 변경이 일어납니다.

 

또한 Vue는 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.

<template>
  <div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
       message: '안녕하세요! Vue.js!'
    }
  }
}
</script>

컴포넌트

저희는 지금까지 HelloWorld라는 컴포넌트에서 작성을 하였습니다.

컴포넌트는 Vue에서 중요한 개념입니다. 독립적이며 재사용할수 있는 컴포넌트를 통해서 대규모 애플리케이션을 구축할수가 있습니다.

<div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</div>

위에서 msg라는 부모 영역에 데이터를 자식 컴포넌트인 HelloWorld에 전달하고 있습니다.

 

HelloWorld.vue 파일에서는 다음과 같이 수정을 합니다.

<template>
  <div id="app-6">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['msg']
}
</script>

위에서는 msg라는 데이터를 받고 해당 하는 데이터를 보여줄수가 있습니다.

 

 

Vue 인스턴스

모든 Vue 앱은 Vue 함수로 새 인스턴스를 만드는 것부터 시작을 합니다.

 

기존에 main.js에 new Vue를 통해서 생성을 하는것을 볼수가 있습니다.

Vue인스턴스를 생성을 할때에는 options 객체를 전달해야 합니다.

관련 전체 옵션 목록은 링크를 달도록 하겠습니다.

 

Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되고 선택적으로 중첩이 가능하며 재사용이 가능한 컴포넌트 트리로 구성됩니다.

데이터와 메소드

data안에 있는 객체에 있든 모든 속성이 Vue의 반응형 시스템에 추가됩니다.

그래서 각 속성값이 변경될 때 뷰가 "반응"하여 새로운 값과 일치하도록 업데이트가됩니다.

 

따라서 어떤 속성이 나중에 필요하다면 초기값 지정이 필요합니다.

여기서 예외는 Object.freeze()을 사용하여 기존 속성이 변경되는 것을 막아 시스템이 추적할 수 없다는것을 의미합니다.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- obj.foo는 더이상 변하지 않습니다! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

 

Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다.

다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙혔습니다.

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 는 인스턴스 메소드 입니다.
vm.$watch('a', function (newVal, oldVal) {
  // `vm.a`가 변경되면 호출 됩니다.
})

인스턴스 라이프사이클 훅

Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 그 과정에서 사용자 정의 로직을 실행 할수가 있는 라이프 사이클 훅도 호출됩니다.

 

중요한 몇개만 일단 다루도록 하겠습니다.

 

created

- 인스턴스가 생성이 되어 호출이 됩니다.

(data와 events가 활성화 되어 접근 할수가 있습니다. 하지만 템플릿과 가상돔은 마운트 및 렌더링이 안된 상태입니다.)

 

mounted 

- 컴포넌트, 템플릿, 렌더링된 돔에 접근이 가능합니다. 

mounted 훅에서 조심해야 할점은 부모와 자식 관계의 컴포넌트에서 생각한 순서대로 mounted가 발생하지 않습니다.

부모의 mounted훅이 자식의 mounted훅보다 먼저 실행되지 않습니다.

 

updated

- 컴포넌트의 데이터가 변하여 재 렌더링이 일어난 후에 실행이 됩니다. 

돔이 업데이트가 완료된 상태므로 돔에 관련된 종속적인 연산을 할수가 있습니다.

하지만 여기서 상태를 변경하면 무한 루프에 빠질수가 있으므로 조심해야 합니다.

 

destroyed

뷰 인스턴스가 제거 된 후에 호출이 됩니다. 따라서 모든 디렉티브가 해제되고 이벤트 리스너가 제거되게 됩니다.