TIL47.Vue.js

react와 비슷한 Vue에 대해 알아보자.

Vue.js란?

뷰는 웹페이지 화면을 개발하기 위한 프론트엔드 프레임워크를 말한다. 리액트,앵귤러와 함께 인기있는 프레임워크로 급부상중이다.
뷰는 리액트와 앵귤러에 비해 쉽고, 성능이 우수하고 빠르다는 장점을 가지고 있다.

뷰 인스턴스

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위를 한다.

뷰 인스턴스 생성 형식

<script>
  new Vue({
  el: '#app',
  data: {
      message:'Hello Vue.js!'
      }
  });
</script>

뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. 필요한 기능들을 생성자에 미리 정의해놓고 사용자가 그 기능을 재정의하여 사용할 때 사용한다.

뷰 인스턴스 옵션 속성

template: 화면에 나타날 HTML,CSS등의 마크업 요소를 정의하는 속성
methods: 화면 로직 제어와 관계된 메소드를 정의하는 속성
created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

뷰 인스턴스 라이프 사이클

인스턴스의 생성, 변경, 소멸과 관련되어 총 8개의 속성이 존재한다.
사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 나뉜다.

• before Create: 인스턴스가 생성되고나서 가장 처음으로 실행되는 라이프 사이클 단계. 이 단계에서는 data속성과 methods 속성이 아직 인스턴스에 정의되어있지 않고, 화면 요소에도 접근할 수 없다.
• created: data속성과 method속성이 정의되어 있는 단계
  아직 인스턴스가 화면요소에 부착되기 전이기 때문에 template속성에 정의된 돔 요소로 접근할 수 없다. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.
• beforeMount: template속성에 지정한 마크업 속성을 render()함수로 변환한 후 el속성에 지정한 화면요소에 인스턴스를 부착하기 전에 호출되는 과정이다.
• mounted: el속성에서 지정한 화면 요소에 인스턴스가 부착되고나면 호출되는 단계이다. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.
• beforeUpdate: el속성에서 지정한 화면요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다. 치환된 값은 뷰의 반응성을 제공하기 위해 watch라는 속성으로 감시한다.지정한 대상의 값이 변경될 때마다 정의한 함수가 실행된다.
  updated: 데이터가 변경되고 가상 돔으로 다시 화면을 그리고나면 실행되는 단계이다. 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계.

*이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기때문에 값을 변경하려면 computer, watch와 같은 속성을 사용해야 한다. 데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고, update에서는 변경 데이터의 화면 요소와 관련된 로직을 추가하는 것이 좋다.

• beforeDestroy: 뷰 인스턴스가 파괴되기 직전에 호출되는 단계. 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다. ex) 다른 페이지로 넘어가는 경우
• destroyed: 뷰 인스턴스가 파괴되고 나서 호출되는 단계이다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다.