ES6

ES2015 문법

• 화살표 함수 (Arrow Functions)
• 템플릿 리터럴 (Template literals)
• 모듈 (Modules)
• 구조 분해와 확장 문법 (Destructuring and spread syntax)

화살표 함수

• 화살표 함수는 자바스크립트로 함수를 선언 시 사용하는 새로운 함수 정의 방식

// 일반적인 자바스크립트 함수(ES5)
function(인자){
  함수 로직...
}
//화살표 함수
(인자) =>{
  함수 로직...
}

this 에 바인딩하지 않는 특성

• 화살표 함수의 중요한 특징은 this 로 바인딩 하지않는것임.
  • 화살표 함수안에서 선언한 this 는 해당 함수가 수행되는 컨텍스트를 가르킴.

filterBySize(){
  let size = this.size;
  return this.items.filter(function(itme){
      return item.size === size; 
      // this.size 참고 시 undefined 발생
  });
}

• ES5 방식으로 정의한다면 콜백 함수 내부에서 선언한 this 는 뷰 컴포넌트 내부를 가르키지 않음.
  • 따라서 콜백함수 안에서 뷰 컴포넌트의 데이터를 접근하려면 유효범위를 이어주는 추가 코딩이 필요함.

filterBySize(){
  return this.items.filter((item) => {
      return item.size === this.size;
  });
}

시사점

• 뷰 인스턴스의 속성들을 정의할때는 화살표 함수를 사용하면 안됨.

const Vue = require('vue');

const test1 = new Vue({
    data:{
        val : 'Hello world'
    },
    computed : {
        upperCase : function(){
            return this.val;
        }
    }
});
console.log(test1.upperCase); // Hello world

const test2 = new Vue({
   data:{
       val: 'Hello world'
   },
   computed :{
       upperCase :() => {
         return this.val;
       }
   }
});
console.log(test2.upperCase); // undefined

템플릿 리터럴

• 문자열 표시할때 사용하는 작은따옴표, 큰 따옴표 대신 백틱(`)을 사용하는것을 의미

• 장점

  1. 문자열을 여러줄에 표시할수있음.(뷰 컴포넌트의 템플릿 선언 시 유용)
  2. 문자열과 자바스크립트 표현식을 함께 사용하기 좋음(computed 속성 사용이 편함)

여러줄 표시

• 자바 스크립트 파일에서 마크업 문법 작성

Vue.component({
  template : '<div><h1></h1><p></p></div>'
  template : '<div>' +
              '<h1></h1>'+
              '</div>'
});
// 템플릿 리터럴 미사용 시 이런식의 불편한 방식으로 사용해야함.

Vue.component({
  template : `<div>
                <h1></h1>
              </div>`
})

변수 삽입 표현식

• ${} 문법 사용 시 변수의 값을 동적으로 표현 가능함.

new Vue({
  data:{
    name : 'George'
  },
  computed : {
    greeting(){
      return `Hello, ${this.name},`
    }
  }
})

모듈

• 모듈 사용 시 import 와 export 문법으로 특정 내용 로딩 가능

// file1.js
export default {
  value: 'Hello'
}
// file2.js
import obj from './file1.js';
console.log(obj.value); //Hello

• 모듈 사용 시 2가지 이점
  1. 자바 스크립트 애플리케이션을 여러개의 파일로 분할가능
  2. 프로젝트 안에서 재사용이 가능한 코드를 생성 가능

컴포넌트 모듈

• 뷰에서 모듈을 가장 잘 활용할 수 있는 부분이 바로 뷰 컴포넌트임.

//ES5사용, app.js
Vue.component('component1', {...});
Vue.component('component2', {...});
Vue.component('component3', {...});
new Vue({...});

• 위와같은 방식은 앱이 점점 커지면 app.js 파일의 내용도 점점 많아지는 단점이 있음.

//component1.js
export default {
  // 컴포넌트 내용 정의
};
// app.js
import component1 from './component1.js';
Vue.component('component1', component1);

• 이외에도 싱글 파일 컴포넌트 체계를 활용하면 컴포넌트 기반으로 더 수월한 프로젝트 구성 가능함.(대신 웹팩이라는 빌드 구도 필요)

구조 분해와 확장 문법

할당 구조 분해

• ES6 구조분해 문법을 이용하면 객체의 특정 값을 다른 변수에 할당하기 쉬움

let Obj={
  prop1 : 'Hello',
  prop2 : 'World'
}
const prop1 = Ojb.prop1;
const prop2 = Ojb.prop2;

//할당 구조 분해를 이용
let Obj={
  prop1: 'Hello',
  prop2: 'World'
};
const { prop1, prop2 } = Obj; 

• 할당구조 분해 문법은 뷰엑스(Vuex)를 다룰때 유용함.

// 액션에서 state 와 commit() 를 접근할 수 있는 context 객체를 받을 때
actions : {
  increment (context){
    context.state
    context.commit(...)
  }
}

// 구조 분해 문법 이용 시 state 속성 사용 필요 없음, 함수 간소화 가능
actions : {
  increment ({commit}){
    commit(...);
  }
}

확장 문법

• 확장 문법은 객체에 키,값 이 많을때 해당 객체의 값을 특정 객체의 값으로 쉽게 복사할수있음.

// ES5 문법 사용 객체값 복사
let Obj={
  prop1: 'Hello',
};

let newOjb = {
  name : 'Orange',
  prop1: Obj.prop1,
}
// ES6 문법 사용
let newObj ={
  name : 'Orange',
  ...Obj
}