React를 위한 ES6

🙄react 공부를 하면서 js에쓰던것을 어떻게 바꿔서 활용하는지 궁금했던게 많았다. 따라서 최신버전에 맞는 문법들을 찾아 적어보는시간을 가져보았다!

👉 변수선언

기존 ES5에서는 var 키워드를 사용하면 if/else 나 for 구문등을 사용하여 코드 블록을 만들어도 변수의 영역이 제한되지 않는 경우가 있다. 이러한 혼란으로 인해 변수 영역을 코드 블록 안으로 한정시킬수 있는 let이 추가되었다.
앞으로는 ES6를 지원하는 개발환경에서 값의 재할당이 필요한 변수를 선언하는 경우 let을 사용하여야 한다.

var topic = "자바스크립트";
if (topic) {
  var topic = "리액트";
  console.log('블록', topic); // 블록 리액트
}
console.log('글로벌', topic); // 글로벌 리액트

const는 값을 변경할 수 없는 변수로 값을 재할당 할 필요가 없는 경우 사용한다.

const pizza = true;
pizza = false;
// Uncaught TypeError: Assignment to constant variable.

let = x, y=0, z=1;

그리고 복수의 변수를 선언할 때 일일이 선언 키워드 (let, const)를 입력하지 않아도 위와 같이 축약하여 선언할 수 있다.

👉 Destructuring assignment (구조 분해 할당)

구조분해할당이란 배열이나 객체의 속성을 해체하여 거기에 있는 속성들을 개별적인 변수에 담을 수 있는 선언방식이다.

//이전 버전 
let array = [1,2,3];
let x = array[0];
let y = array[1];
let z = array[2];

//ES6 배열 구조 분해
let array = [1,2,3];
let [x,y,z] = array;
console.log(x,y,z); // 1 2 3

//이전 버전
let object = {name : 'Aiden', job : 'coding', age : 20};
let name = object.name;
let job = object.job;
let age = object.age;

//ES6 객체 구조 분해
let {name,job, age} = {name : 'Aiden', job : 'coding', age : 20};
console.log(name, job, age) // Aiden coding 20

👉 Arrow Function

화살표함수
() => { ... } // 매개변수가 없는 경우
x => { ... } // 매개변수가 1개인 경우, 소괄호 생략 가능
(x,y) => { ... } // 매개변수가 2개 이상인 경우, 소괄호 생략 불가

//함수 몸체 지정 방법

x => { return x*y } // single-line block
x => x*y // 만일 한 줄이라면 이와 같이 중괄호 생략 가능
// 중괄호 생략 시 암묵적으로 return함.

() => { return { user : object.name }; }
() => ({ user : object.name })
// 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다. 

👉 string method

그 동안 string에서 특정 string을 찾기 위해 indexOf 를 사용했다.
그런데 이제 아래의 3가지 method가 생겼다.
이름그대로 기능이라고 생각하면된다
startsWith
endsWith
includes

const email = 'yealee.kim87@gmail.com';
 
console.log(email.startsWith('ye'));
console.log(email.endsWith('com'));
console.log(email.includes('@gmail'));