React - ES6를 알고 있어야 하는 이유?

최근 트랜드로 대두되고 있는 프레임워크 (react, vue등)이 개발 환경을 ES6으로 맞춰가고 있기 때문에 ES6에 주목할 필요가 있다. 

JavaScript ES6 ( ECMAScript 2015 또는 ECMAScript 6 이라고도 함 )은 2015년에 도입된 최신 버전의 JavaScript입니다.

 

• Classes
• Arrow Functions
• Variables (let, const, var)
• Array Methods like forEach() / map() / reduce()
• Destructuring
• Modules
• Ternary Operator
• Spread Operator
• Template String

 

Classes

class Expedition extends Vacation {
    constructor(destination, length, gear) {
        super(destination, length)
        this.gear = gear
    }

    print() {
        super.print()
        console.log(`Bring your ${this.gear.join(" and your ")}`)
    }
}

class 키워드, extends(상속), super(), construtor 생성자

 

 

Arrow Functions

hello = function() {
	return "Hello World!";    
}

hello = () => {
	return "Hello World!";
}

hello = () => "Hello World!";

hello = (val) => "Hello " + val;

hello = val => "Hello " + val;

 

Variables

var x = 5.6;

let x = 5.6;

const x = 5.6;

var 는 함수 또는 global 에서 사용된다. block 에서는 통하지 않는다.
let 은 block 범위에서 사용된다.
const 는 딱 한번만 정의된다. 하지만, array 의 배열이나, 객체의 속성은 변경이 가능하다. (특이점이다.)

 

 

Array Methods like forEach() / map() / reduce()

const myArray = ['apple', 'banana', 'orange'];

const myList = myArray.map((item) => <p>{item}</p>)


var arr = [1,2,3,4,5];

// forEach()
var newArr = arr.forEach(function(e, i) {
  return e;
});
// return -> undefined

// map()
var newArr = arr.map(function(v, i, arr) {
  return v + 1;
});
// return -> 2, 3, 4, 5, 6


result = sum.reduce((prev, curr, i) => {
  console.log(prev, curr, i);
  return prev + curr;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

forEach() : 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행
map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환
reduce() : 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환

 

 

Destruction Arrays

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

// new way
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;

 

필요한 값만 선별적으로 요청할 수 있다.

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

 

 

Modules

import, export

export

# person.js

export const name = "Philip";
export const age = 50;

또는

const name = "Philip";
const age = 50;

export {name, age}

또는

const name = "Philip";
export age = 50;

export default name;

 

import

import {name, age} from "./person.js";

import name, {age} from "./person.js";

export default 키워드 사용시 {} 사용하지 않는다.

 

 

Ternary Operator

 

if 문 축약형

조건 ? 참 : 거짓

authenticated ? renderApp() : renderLogin();

 

 

Spread Operator

(...) 

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

 

 

Template String

var name = 'jhon'
var text = `my name is ${name}`
console.log(text) // my name is jhon

문자열을 덧셈연산이 아니라 ${변수} 로도 처리할 수 있다.