React, 너를 위한 ES6

hyksmine·2019년 11월 16일
1

es5-> es6로 넘어오면서 많이 사용되는 문법 중 일부를 소개하고자 한다:)

화살표 함수 (Arrow Function)

  • 'function' & 'return' 키워드가 빠지고 ()소괄호로 변경!
    인자가 하나일 때는 소괄호 생략이 가능. 인자가 두 개일 때는 생략 xxx..
  • arrow function은 익명 함수이다.
//ES5
function() {}
//ES6
() => {}

//ex5
function (name) { 
  return name.toUpperCase();
}
// ES6 
name => name.toUpperCase();
  • 기존 함수와 가장 큰 차이점은 this 의 바인딩 여부. 화살표 함수를 사용하게 되면서 window를 가르키게 되는 this를 부모함수를 가르키게 함.
    React에서 이벤트 핸들러 함수를 바인드할때 화살표 함수를 사용.
function xoxo() {
  this.func1 = function() {
    console.log("1번",this);
 
  }

  this.func2 = function() {
    let func3 = () => {
      console.log("2번",this);
  
    }
    func3();
  }
}

let something = new xoxo();
something.func1();
//'1번' xoxo { func1: [Function], func2: [Function] }
something.func2();
//'2번' xoxo { func1: [Function], func2: [Function] }

비구조화 할당 (destructuring assignment)

  • 배열이나 객체 속성을 분해하여 특정 데이터를 꺼내어 변수로 대입할 수 있는 문법
  • 변수 선언시 { } 를 사용
const car = {
 type: 'Toyota',
 color: 'Silver',
 model: 2007
};
// es5 
const type = car.type;
const color = car.color;
const model = car.model;
console.log(type, color, model); // Toyota Silver 2007
// es6
const {type, color, model} = car;
console.log(type, color, model); // Toyota Silver 2007

템플릿리터럴 (template literal)

역 따옴표(backticks)을 사용하여 문자열을 연결하거나 문자열 중간에 표현식를 삽입하여 사용할 수 있다. 멀티라인( +, \n .. )등을 사용하여 복잡한 문자열을 표현할 필요가 없게되서 코드 가독성을 높이고 엔터를 통해 공백과 개행을 표현 할 수 있게 됨..

const name = "철수";
const job = "developer";

const msg = `제 이름은 ${name} 이고
직업은 ${job} 입니다.`;

console.log(msg);
//
제 이름은 철수 이고
직업은 developer 입니다.
//

기본매개변수 (default parameter)

파라미터의 값이 들어오지 않으면 무조건 undefined 가 됐지만, ES6 부터 그 기본값(default) 을 설정할 수 있다.

//es 6
function multiply(a,b =1) {
  return a*b
}
multiply(5, 2); // 10
multiply(5); // 5
multiply(5, undefined) // 5 

그 외에 추가된 부분 (class, promise etc..)에 대해선 to be continued...

0개의 댓글