VueJS를 위한 ES6문법 4가지

VueJS 개발할 때 많이 쓰이는 ES6 문법 4가지에 대해서 다룬다.

1. 화살표 함수 (Arrow Functions)

• js 함수를 선언할 때 사용하는 새로운 함수의 정의 방식이다. 더 짧은 코드로 선언할 수 있다는 장점이 있다.

//ES5방식
function(인자) {
	//로직
}

//ES6방식
(인자) => {
	//로직
}

Arrow함수의 중요한 특징은 this로 바인딩 하지 않는 것이다. 대신, Arrow함수 안에서 선언된 this는 해당 함수가 수행되는 컨텍스트를 가리킨다.

따라서 콜백 함수 안에서 뷰 컴포넌트의 데이터를 접근하려면 유효 범위를 이어주는 추가 코딩이 필요하다.

예제

new Vue({
  data: {
    size: 'large',
    items: [ { size: 'small' }, { size: 'large' } ]
  },
  computed: {
    filterBySize() {
      let size = this.size;
      return this.items.filter(function(item) {
        return item.size === size;
        // 참고 : 여기서 this.size를 접근하면 undefined
      });
    }
  }
});

size는 데이터 속성이고 filterBySize는 computed 속성입니다. filter() API를 사용하기 전에 선언한 let size = this.size;는 콜백 함수 안에서 뷰 컴포넌트의 데이터 속성을 접근하기 위해 추가한 코드입니다.

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

인자 값이 1개인 경우 더 줄일 수 있다.

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

2. 템플릿 리터럴 (Template literals)

• 문자열을 표시할 때 사용하는 따옴표('), 큰 따옴표(") 대신 백틱을 (back tic) 이용하여 한번에 작성할 수 있다.

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

예제

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

아래는 변수 삽입식 표현식.

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

Back tic 안에 ${} 문법을 사용하면 한번에 작성할 수 있다.

3. 모듈 (Modules)

• import, export 문법으로 특정 내용을 로딩할 수 있다.

// file1.js
export default {
  myVal: 'Hello'
}

// file2.js
import obj from './file1.js';
console.log(obj.myVal); // Hello

자바스크립트 애플리케이션을 여러 개의 파일로 분할할 수 있습니다.
프로젝트 안에서 재사용이 가능한 코드를 생성할 수 있습니다.

4. 구조 분해와 확장 문법 (Destructuring and spread syntax)

• ES6의 구조분해 Destructing 문법을 이용하면 객체의 특정 값을 다른 변수에 할당하기가 쉽습니다.

let myObj = {
  prop1: 'Hello',
  prop2: 'World'
};

const prop1 = myObj.prop1;
const prop2 = myObj.prop2;

위 문법을 아래와 같이 바꿀 수 있습니다.

let myObj = {
  prop1: 'Hello',
  prop2: 'World'
};

const { prop1, prop2 } = myObj;

console.log(prop1); // Hello

출처 - 캡틴판교