React에서 ES5/ES6란?(WIL쪼끔)

💜 ES란?

• ES는 ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.
• 뒤에 숫자는 버전을 뜻하고 요즘 사용하는 버전은 ES5,ES6정도이다.

💛선언 키워드

var하나로 모든걸 선언 했던 ES5의 여러가지 문제 때문에 ES6에서는 재선언 불가 재할당 가능한 let변수 선언 키워드와 상수선언 키워드 const가 추가되었다. 기존에 var하나로 모든걸 선언했을 때 보다 예측가능한 코드를 작성할 수 있게 되었다. 

 

🧡템플릿 리터럴

``(백틱)과 ${}를 통해 기존보다 덜 복잡하게 표현식을 만들 수 있다. 또한 이를 이용해 기존에 "\n"와 덧셈 연산자를 써야지만 줄 바꿈이 가능 했던 문자열 관리 또한 편해졌다.

// ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;

// ES6
let str1 = ', ';
let str2 = 'World!';
let str3 = `Hello ${str1} ${str2}`;

 

🧡객체 리터럴

이전 보다 더 간결해진 코드로 객체선언이 가능하다. 메서드 생성 방식도 간소화 되었고 변수만으로 프로퍼티/메서드 생성이 가능하다.

//(기존) 
var exObj = { 
    hello : function(){return `Hello World!`} 
    };


// (ES6) 
var newObj = {
    hello(){return `Hello World!`;}
    }; 

console.log(newObj); // { hello: [Function: hello] }

 

🖤화살표 함수

이게 내 기준에 현재 가장 많이 사용하는 함수인것 같다.

함수표현식을 화살표로 간단하게 나타낼수 있고 이로 인해 가독성 및 유지 보수성이 올라갔다.

// ES5
function plusFn(a, b) { 
  return a + b; 
} 

// ES6
// 함수 표현식 - 화살표 함수
const plusFn = (a, b) => {
  return a + b;
}
// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (a, b) => a + b;

🤍스프레드 오퍼레이터

... 이 간결한 오퍼레이터는 배열앞에 붙이면 해당 배열을 흩뿌려준다. 배열뿐만 아니라 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있습니다. 이를 사용해 배열 병합, 배열 복사 또한 가능하다.

 

// 기존 방식
var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 

var arr = arr1.concat(arr2); 
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

// ES6 spread operator
var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 

var arr = [...arr1, ...arr2]; 
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

💚promise

• 자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한, 콜백 패턴을 사용하였다.
• 결과론적으로, 콜백헬을 발생시켰다.
• 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.

💙class

• 자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
• 클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다.
• 자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다.
• 클래스는 사실 특별한 함수이다.
• 클래스는 호이스팅이 let, const 키워드 처럼 동작한다.

 

>>>> 마지막 두개는 이론상으로만 와닿고... 엄청나게 와닿지는 않는다. 더 하다보면 알겠지ㅠ.ㅠ

물론 지금 ES6가 나왔다고 해서 ES5를 사용하면 프로그램이 돌아가지 않는 것은 아니다. 하지만 최근 트렌드에 맞는 문법들은 분명히 있다. 코드를 많이 입력해 보면서 사용해 봐야 어떤 함수가 현재 트렌드이고 이래서 바꿨구나 라는 감은 올 것 같다.

 

이번주에는 알고리즘을 끝내고 본격적인 React주로 넘어왔다. 중간에 기술 매니저님이... 봐야 할 영상을 엄청나게 떨어뜨리고 가셔서 너무 바쁜주였어.. ㅠ.ㅠ 바닐라 JS 실습을 해봤꼬 코딩앙마도 모두 봐서 블로그에 정리해 두었다. 그리고 알고리즘 너무 재밌고 흥미롭긴한데... 꼐속 할 수 있는 시간이 될 지는 모르겠다.  생각나면,,, 해볼까? 아니면 React부터.. 그리고 지금까지 내가 했던 코딩은 React의 새발의 피 정도였어!!!!!!(⊙_⊙;) 본격적으로 하려고 하다 보니까 진짜 장난 아니란걸 깨달아 버림!