Vue.js 소개 및 매뉴얼: https://kr.vuejs.org/v2/guide/

인스턴스의 라이프사이클

  • beforeCreate: 인스턴스가 초기화 된 직후 데이터 관찰 및 이벤트 설정 전에 동기적으로 호출되는 단계입니다.
  • create: 인스턴스가 작성된 후 beforeCreate 다음 단계에 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다.  data 속성에 접근할 수 있는 단계이므로 서버에 데이터를 받아오는 작업은 이 단계에서 수행하는 것이 좋습니다.
  • beforeMount: 마운트(HTML 요소를 페이지에 렌더링하는 것을 요청)가 시작되기 바로 전에 호출됩니다.
  • mounted: 마운트 된 후에 실행됩니다. 렌더링 요청 직후에 호출되므로 실제 HTML 요소가 페이지에 렌더링되는 시점과는 차이가 있을 수 있습니다. 화면 요소를 제어하는 작업은 이 단계에서 수행하는 것이 좋습니다.
  • beforeUpdate: 데이터가 변경되면, 가상 DOM 재 렌더링과 패치가 이뤄지기 전에 호출됩니다.
  • updated: 데이터가 변경되어 가상 DOM이 재 렌더링되고 패치되면 호출됩니다. 이 단계에서 데이터 값 변경을 시도할 경우 무한 루프에 빠질 수 있습니다.

 

예제: 이름으로 보는 2019년 운세

  • 이름을 입력하면 이름을 변환한 해시값을 3등분하고 그 3등분한 부분을 금전운, 사업운, 생명운 수치로 환산해 수치와 해석을 화면에 뿌려주는 운세 예제입니다. 해시값은 원문과 1:1로 대응하므로 고유의 이름은 여러번 측정해도 동일한 수치가 나옵니다.
  • 13라인의 DIV 요소의 id 속성에 사용할 id를 입력합니다.
  • 14라인에서 inputv-model="[해당 vue 인스턴스의 data 객체에 있는 변수 키 이름(이하 데이터 키)]"을 입력하면 실시간 동기화가 됩니다.  또한 v-on:keyup.enter="hashing" 부분은 키보드의 엔터 버튼을 눌렀을 경우 해당 인스턴스의 hashing 메소드(29라인)를 찾아 실행하라는 의미입니다.
  • 15라인의 v-on:click 속성은 클릭되었을 때 해당 인스턴스의 hashing 메소드(29라인)를 찾아 실행하라는 의미입니다.
  • 16라인의 {{text}}는 vue 객체에서 text 데이터 키를 찾아 쌍괄호 안 부분을 해당 데이터로 렌더링하라는 의미입니다. text는 처음에 빈 값으로 선언되어 있으므로 값이 나오지 않으나, 나중에 text가 외부에서 변경된다면 이 부분의 내용은 실시간으로 바뀔 것입니다.
  • 20라인은 Vue 인스턴스를 선언하는 부분입니다.
  • 21라인의 el에서  app이라는 아이디를 가진 div#app을 지정했으므로 앞으로 이 요소는 Vue 인스턴스에 의해 조작됩니다. el에서 지정하지 않는다면 Vue 인스턴스와 무관한 요소이지만, el을 지정하는 순간 인스턴스의 변경 내용은 이 요소에 즉각 반영됩니다.
  • 22라인의 data에서 사용하고자 하는 데이터들을 선언합니다.  data 자체는 객체이며, 그 안에 키-값들로 사용할 데이터를 미리 만들어 놓습니다. 여기서 만든 데이터들은 인스턴스 안에서 this 키워드를 사용하거나 html 요소에서 {{[데이터 키]}}를 사용하여 접근할 수 있습니다.
  • 28라인에서는 사용자가 임의로 메소드(methiod)를 설정하여 추후 사용할 수 있도록 합니다. method는 뷰 인스턴스에서 사용할 함수들을 통칭하는 것이라고 보면 되겠습니다. hashing: function(e){...}에서 hashing이 메소드 이름이며 할당된 함수는 실행할 내용입니다. (e는 이벤트 객체)
  • 66라인은 데이터를 외부에서 가져온다는 가정하에(예제이므로 단순한 변수로 선언했습니다.)  create 라이프사이클 단계에서 데이터를 할당하는 작업을 실행하였습니다. AJAX를 사용하여 서버에 데이터를 가져오는 작업은 이 단계에서 수행하는 것이 좋습니다.
  • 텍스트 필드에 값을 입력하고 엔터 혹은 버튼을 클릭하면, hashing 메소드가 실행되면서 결과를 data의 text에 업데이트하면, 업데이트 결과를 실시간으로 감지해 div의 {{text}}부분을 업데이트된 데이터로 실시간으로 업데이트하는 예제입니다.

JSFiddle에서 실행결과 보기
https://jsfiddle.net/fqjca584/

문의 | 코멘트 또는 ayaysir0@naver.com

donaricano-btn

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다