11. 뷰 개발을 위한 ES6 (ECMAScript 2015)

# ES6 (ECMAScript 2015) 는 개발자가 더 쉽게 코드를 작성할 수 있도록 문법을 단순화하고, 미숙한 코딩으로 인한 오류를 미연에 방지하기 위해 언어 자체에서 유효 범위를 제한하는 등의 기능이 추가되었다.

 

ES5	ES6
var num = 100; var sumNumbers = function (a, b) { return a + b; }; ​ sumNumbers (10, 20);	const num = 100; let sumNumbers = (a, b) => { return a + b; }; ​ sumNumbers (10, 20);

 

const 와 let 예약어

 

# 변수 : ES5 에서는 var / ES6 에서는 let

# 상수 : ES6 에서 const → 선언한 후 값이 바뀌지 않고 동일하게 사용되는 변수

 

let a = 10;
a = 20; // 20

const a = 10;
a = 20; // Uncaught TypeError: Assignment to constant variable

따라서, 상수 값이나 함수를 정의할 때는 const / 반복문을 비롯한 나머지 변수를 선언할 때는 let 을 활용하자.

 

블록의 유효 범위

 

ES5	ES6
var i = 10; for (var i = 0; i < 5; i ++) { console.log(i); // 0, 1, 2, 3, 4 } ​ console.log(i); // 5	let i = 10; for (let i = 0; i < 5; i ++) { console.log(i); // 0, 1, 2, 3, 4 } ​ console.log(i); // 10

 

ES5는 변수의 유효 범위가 블록 단위로 제한되지 않는다.

ES6는 변수의 유효 범위가 블록 단위로 제한된다.

 

 

화살표 함수 (Arrow Function)

 

ES5	ES6
var sumNumbers = function (a, b) { return a + b; };	var sumNumbers = (a, b) => { return a + b; };

 

Import 와 Export

 

※ 모듈화 : 코드를 특정 기능이나 로직 단위로 구분하여 각각의 모듈로 관리하는 것이다.

// ./app/login.js
export cont id = 'test';

// ./main.js
import { id } from './app/login.js';
console.log(id);

 

# 뷰 싱글 파일 컴포넌트 체계에서 import 와 export

<template>
  <div id="app">
    <Login></Login>
  </div>
</template>

<script>
import Login from './Login.vue';

export default {
  component: {
    'Login': Login
  }
}
</script>

※ import 대상 파일에 export 가 정의되어 있지 않으면 기본적으로 파일의 모든 내용이 export 된다.