ES6 Grammar Essentials (a)

리액트에 필요한 자바스크립트 ES6의 핵심 문법(주요 문법, 필수 사항?)을 정리해보자. 소개한 문법들만 제대로 숙지하고 있어도 리액트로 웹을 설계하고 개발할 때 문제가 되진 않을 것 같다. 물론 기본적인 JS 기초는 알고 있다는 가정이다.

템플릿 문자열

var string1 = '오늘의 날씨는 정말이지..';
var string2 = '제도관에 박혀있기 너무 아까운 날씨야';
var greeting = string1 + ' ' + string2;

var product = { name: '도서', price: '50000원' };
var message = '제품' + product.name + '의 가격은' + product.price + '입니다. 어마무시하죠?';

var multiLine = '문자열1\n문자열2';
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = '곱셈값은 ' + value1 * value2 + '입니다. ';
var operator2 = '불리언값은 ' + (boolValue ? '참' : '거짓') + '입니다. ';

딱히 불편한 점이 없어 보이지만 문자열 안에 특정 변수의 값을 넣을 때 상당히 불편하다. 특히 message 와 operator의 경우 그러하다. 이를 개선하여 ES6에서는 템플릿 문자열(백틱)을 도입했다.

//ES6 문법
var string1 = '오늘의 날씨는 정말이지..';
var string2 = '제도관에 박혀있기 너무 아까운 날씨야';
var greeting = `${string1} ${string2}`;

var product = { name: '도서', price: '50000원' };
var message = `제품 ${product.name}의 가격은 ${product.price}입니다. 어마무시하죠?`;
var multiLine = `문자열1
문자열2`;
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2}입니다.`;
var operator2 = `불리언값은 ${boolValue ? '참' : '거짓'}입니다.`;

줄바꿈 기능 - multiLine 역시 매우 유용하다(간편하다) 직접 써봐야 아는데... 진짜로 편하다.

전개 연산자

ES6의 전개 연산자(spread operator)는 아주 아주 유용하다. 이걸 알게된지 얼마 되지 않았지만 이제야 알게 됐다는게 너무 석이 나갈 정도.

전개 연산자 내용도 이전에 한번 정리해서 올렸었다. concat 함수와 함께 올렸던 것 같다. 그러므로 간단하게 알아보고 넘어가자. 하이라이트는 젤 마지막에 나올 클래스!!!

가변 변수와 불변 변수

기존의 자바스크립트에서는 변수를 선언할 때 var 키워드를 사용했었다. ES6 에서는 값을 수정할 수 있는 가변 변수를 위한 let 키워드와 값을 수정할 수 없는 불변 변수를 위한 const 키워드를 사용한다. 이전에 이와 관련한 내용을 올렸다(사실 거의 똑같은 내용이다) 그러므로 간단하게만 알아보고 넘어간다.

// 타입 에러 발생 예시
const num = 1; 
num = 3;
const str = '문자';
str = '새 문자'; 
const arr = [];
arr = [1, 2, 3];
const obj = {};
obj = { name: '내 이름' };

하지만 배열이나 객체를 불변 변수로 선언하고 자바스크립트의 내장 함수(메서드)를 이용해서 값을 변경할 수 있다. 아래의 코드를 보자 분명히 arr2나 obj2는 불변 변수 인데도..

const arr2 = [];
arr2.push(1); // arr2 = [1]
arr2.splice(0, 0, 0); // arr2 = [0,1]
arr2.pop(); // arr2 = [1]

const obj2 = {};
obj2['name'] = '내이름'; // obj2 = { name: '내이름' }
Object.assign(obj2, { name: '새이름' }); //obj2 = { name: '새이름' }
delete obj2.name; //obj2 = {}

불변 변수는 분명히 값을 수정할 수 없는데?
( 이전에 블로그에 같은 내용을 올렸었다. 제목이.. 잘은 기억 안나지만
const, var 키워드 ? 였던거 같다. )

이러한 상황을 무결성 제약 조건에 위배되었다라고 한다.

무결성을 유지하면서 불변 변수의 값을 수정해야 하는 경우가 있다. 이럴 땐 수정할 불변 변수를 새로 만들어 새 값을 할당하는 방법을 이용한다. 좀 더 정확하게는 수정한다기 보단 새로 정의한다? 에 가깝다. 기존에 있는 불변 변수의 내용을 바꾸는 것은 안되지만, 새로운 변수에다가 그 내용을 할당하는 것은 괜찮다.

마지막 대망의 하이라이트 클래스!!!!

클래스

기존의 자바스크립트 클래스 표현 방식

function Shape(x, y) {
  this.name = 'Shape';
  this.move(x, y);
}
// static 타입 선언 예제
Shape.create = function(x, y) {
  return new Shape(x, y);
};
Shape.prototype.move = function(x, y) {
  this.x = x;
  this.y = y;
};
Shape.prototype.area = function() {
  return 0;
};

// 혹은
Shape.prototype = {
  move: function(x, y) {
    this.x = x;
    this.y = y;
  },
  area: function() {
    return 0;
  },
};

var s = new Shape(0, 0);
var s2 = Shape.create(0, 0);
s.area(); // 0

기존의 자바스크립트에서는 함수를 생성자 형태로 선언한 다음 상속이 필요한 변수나 함수를 prototype 객체에 할당하는 방법을 사용했었다.

prototype 객체는 new 연산자로 생성되는 객체 안에서(위 코드에서 s, s2) this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소인데 이를 이용한 방법이다.

위의 new Shape(0,0) 과 같이 함수를 호출하면 this 객체에 해당하는 변수 및 함수가 prototype 객체에 선언된 변수와 함수를 함께 참조한다. (이 경우는 s 에 해당)

예를 들어 Shape() 함수(생성자)에는 this.move에 함수를 정의하지 않았지만

function Shape(x, y) {
  this.name = 'Shape';
  this.move(x, y);
}
// move 에 대한 정의가 되어 있지 않다.

prototype 객체에 move() 함수가 정의되어 있으므로

Shape.prototype.move = function(x, y) {
  this.x = x;
  this.y = y;
};

prototype 선언 이후 new 연산자로 Shape() 함수를 호출하여 Shape 객체 s 를 만든다. 그러면 s 는 prototype 객체 안에 있는 move() 함수를 참조할 수 있다.

이 모든 과정을 ES6 에서는 class 키워드로 클래스를 정의하므로 코드가 엄청나게 짧아진다. 보기도 편하다. 이해하기도 훨씬 수월하다.

class Shape {
  static create(x, y) {
    return new Shape(x, y);
  }
  name = 'Shape';

  constructor(x, y) {
    this.move(x, y);
  }
  move(x, y) {
    this.x = x;
    this.y = y;
  }
  area() {
    return 0;
  }
}

var s = new Shape(0, 0);
var s1 = Shape.create(0, 0);
s.area(); // 0

ES6 에서 class 키워드를 사용한 클래스에서는 상속도 엄청나게 쉽고 편하게 표현 가능하다.

class Circle extends Shape {
  constructor(x, y, radius) {
    super(x, y);
    this.radius = radius;
  }
  area() {
    if (this.radius === 0) return super.area();
    return this.radius * this.radius;
  }
}

var c = new Circle(0, 0, 10);
c.area(); // 100

---

다음 편 (b) 에서는 진짜 정말 정말 중요한 내용들을 다뤄볼 것이다.

1. 화살표 함수 (없어서는 안된다..)
2. 객체 확장 표현식과 구조 분해 할당 (말로만 들었지 공부해보니 그거 되게 심오하더라..)
3. 라이브러리 관리 (이건 원래 아는 내용이었음 ㅎ)
4. 배열 (할말 하않, 모든 걸 안다고 생각했지만 막상 또 공부해보니 그게 아니더라)
5. 비동기 함수 (이건 진짜 하.. 몇번을 다시 봐도 어렵다...)

투 비 컨티뉴 :D