React를 위한 ES6 핵심정리

 

 

React를 하기 전! ES6문법에 대해 알아야한다.

ES6를 모르고 한다면 여러가지 ES6문법들이 React에 종속된 문법이라고 착각할 수도 있기 때문에 ES6문법에 대한 최소한의 이해는 필수적임.

 

 

주의점

아래 여러가지 기능들은 크롬이나 사파리에서 작동은 잘 되지만, but 제대로 지원이 되지 않을 수도 있으니 Babel(Babel.io)을 사용하여 변환하는 기능을 사용해야한다.

 

 

 

ES2015

ES6 === ES2015

(ES2016, ES2017 ..)

개선된 Javascript 문법.

ES6 Browser compatibility의 휼륭한 지원.

ES6를 기반으로 한 JavaScript 생태계의 확산.

1. scope enhancements ‐ let

ES6 에서는 let 키워드를 사용해서 변수를 사용하면 블럭단위의 스코프를 만들 수 있다.

키워드를 사용하면 됨(따라서, 블록단위로 사용할 때는 let을 사용하는 것을 권장)

var name = 'play ground'; 
function home() {
    var homeName = 'my house';
    for (let i = 0; i<1000; i++){} 
    console.log(i); //i is not defined
}

 

 2. scope enhancements ‐ const(1/2)

const로 선언된 변수는 값을 재할당 할 수 없다.

function home() {
    const homeName = 'my house';
    homeName = 'your house'; 
}
home() //TypeError: Assignment to constant variable.

 

 2. scope enhancements ‐ const(2/2)

const를 사용한다고 불편을 의미하는 것은 아님. const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능.

function home() {
    const list = ['john', 'adele', 'hary']; list.push('tiger');
    return list;
}
home() //["john", "adele", "hary", "tiger"]

참고 : immutable array를 만드는법

const list = ['john', 'adele', 'hary']; list2 = [].concat(list);
list == list2; //false

 

 

 

 3. Array enhancements ‐ spread operator (1/3)

배열 합치기가 쉬움.

let previousData = ["apple", "orange", 100, 200]; 
let newData = [1,2,3,...previousData];
console.log(newData);
//[1, 2, 3, "apple", "orange", 100, 200]

 

 3. Array enhancements ‐ spread operator (2/3)

새로운 배열로 쉽게 복사 가능. 손쉽게 immutable 객체 생성 가능

let previousData = ["apple", "orange", 100, 200]; 
let newData = [...previousData];
console.log(newData === previousData); //false

 3. Array enhancements ‐ spread operator (3/3)

배열을 function에 개별 파라미터로 전달하기가 쉽다.

function sum(a,b) { return a+b} 
const arr = [4423,42];

//sum.apply(null, arr);
sum(...arr);

 4. Object enhancements

객체를 쉽게 생성. 메서드에 function 키워드도 생략가능.

const name = "nayoun"; 
const age = 9;
const others = {
    address : "kwang myeung city", 
    tel : null,
    height: 130
}
const data = { 
    name,
    age,
    others, 
    getName() {
        return this.name; 
    }
}
console.log(data.getName()); //nayoun

 5. Destructuring

Destructuring은 객체를 모두 전달할 필요없이, 필요한 객체 내부의 변수만 전달이 가능하여 강력하고 간결함

Array Destructuring

let previousData = ["apple", "orange", 100, 200]; 
let [,,applecount, orangecount] = previousData;

 

Object Destructuring

let obj = {
    name : "crong",
    address : "pororo house", 
    age : 12
}
let {name, age} = obj;
console.log(name,age);

// 변수 이름을 변경해서 받을 수도 있음.
let {name:myName, age:myAge} = obj; 
console.log(myName, myAge);

 

 

 

 6. Destructuring practice (1/2)

참고 url : https://gist.github.com/nigayo/787180f0c9756d198df45c2de4fb20db

//make title and imgurl array of mbc
let [,mbc] = news;
let {title,imgurl} = mbc; 
console.log(title,imgurl);

// 또는 이렇게도 가능.
//make title and imgurl array of mbc 
let [,{title,imgurl}] = news; 
console.log(title,imgurl);

 

 6. Destructuring practice (2/2)

참고 url : https://gist.github.com/nigayo/787180f0c9756d198df45c2de4fb20db

//destructuring in function parameters
//let {newslist} = mbc; 와 같이 동작된다고 할 수 있음.
function getNewslist({newslist}) {
    console.log(newslist); 
}
getNewslist(mbc);

//make imgurl array.
var urls = news.map(({imgurl}) => imgurl); 
console.log(urls);

 

 7. template enhancements

템플릿을 활용하여 반복되는 객체에 대해서 간결하게 사용가능. 물론 AngularJS와 같이 멋진 프레임워크들이 있지만 간단한 템플릿의 경우 아래와 같이 사용 가능함.

const data = {
    hour : new Date().getHours(),
    name : "codesquad" 
}
const template = `<div><span>hello! ${data.name}</span></div>` 
console.log(template);

 8. Tagged template literals

tagged template 은 template 문자열의 파싱이 필요한 경우에 사용가능.

function fn(val, name, hour) {
    var ampm = (hour > 11) ? "pm" : "am";
    console.log(val[0], name, val[1], hour, ampm, val[2]);
}
var data = {
    hour : new Date().getHours(),
    name : "solvin" 
}
const template = fn`<div><span>hello! ${data.name}, current time is ${data.hour}</span></div>`;

 9. function enhancements ‐ arrow (1/2)

setTimeout(() => {console.log("hello")}, 1000); 
setTimeout(() => console.log("hello"), 1000);

var newArr = [1,2,3].map((v) => { 
    return v*2;
});
var newArr = [1,2,3].map((v) => (v*2)); 
var newArr = [1,2,3].map((v) => v*2); 
var newArr = [1,2,3].map(v => v*2);

 

 9. function enhancements ‐ arrow (2/2)

주의! arrow를 사용하는 경우, this가 가리키는 부분이 콜백이 실행되는 시점이 아닌 함수가 정의된 시점의 context를 기준으로 함.

 

var obj = { run() {
        setTimeout(function() { 
            console.log(this);
        }, 1000); 
    }
}
obj.run(); //window

var obj = { run() {
    setTimeout(() => { 
        console.log(this);
    }, 1000); }
}
obj.run(); //obj

 

 10. function enhancements ‐ default parameters

기존에는 변수를 모두 안넣어주면 해당 변수는 undefined로 선언됨.

ES6에서는 default parameter를 사용하여 기본값을 선언, 할당 가능.

function sum(value, count=10, size=20) {
    return value * size; 
}
sum(3,10);

 

 11. function enhancements ‐ rest parameters

rest parameter를 활용해 임의의 인자를 배열형태로 받을 수 있다.

rest parameter는 진짜 배열임으로 arguments를 사용해야 하는 상황에서는 더 효과적.

function checkNumber(...arg) {
    const result = arg.every((v) => typeof v === "number");
    console.log(result); 
}
checkNumber(1,2,3,NaN,4,5,null);

 12. ES6 Class

중요! 최근의 js 프레임워크에서 표준으로 쓰임.

class Health { 
    constructor(name, lastTime) {
        this.name = name;
        this.lastTime = lastTime; 
    }

    showHealth() { 
        console.log("오늘은" + this.lastTime + "까지 "+this.name+" 운동을 하셨네요. ");
    }
}
var myHealth = new Health("", "23:11"); 
myHealth.showHealth();
Colored by Color Scripter

 

13. Module. (import, export)

webpack같은것으로 적용 가능하지만, 웹브라우저의 지원범위가 적어서 잘 쓰이지 않는다. 쓸때 주의해야함.

//calculate.js
export const sqrt = Math.sqrt; 
export function square(x) {
    return x * x; 
}
export function diag(x, y) {
    return sqrt(square(x) + square(y)); 
}

//service.js
import { square, diag } from './calculate.js'; 
console.log(square(11)); // 121 
console.log(diag(4, 3)); // 5

//main.html 
<script type="module" src='./src/service.js'></script>

 

 

참고url : https://developers.google.com/web/updates/2017/09/nic61#module

 

End of Document