React - 리액트에 필요한 자바스크립트 ES6 문법 (클래스)

React - 리액트에 필요한 자바스크립트 ES6 문법 (클래스)

---

출처 : 

http://www.yes24.com/Product/Goods/87631428

Do it! 리액트 프로그래밍 정석 - YES24

 

이전 포스팅

React - 리액트에 필요한 자바스크립트 ES6 문법 (변수 let, const)

React - 리액트에 필요한 자바스크립트 ES6 문법 (템플릿 문자열, 연산자)

React 개발 환경 세팅 (NVM node.js, yarn, 비주얼 스튜디오 코드)

 

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

기존의 자바스크립트에서는 클래스 표현식이 없으므로, 함수를 생성자(constructor) 형태로 선언 후 변수나 함수를 prototype 객체에 할당함으로써 상속을 표현했습니다. prototype 객체는 [new] 연산자로 생성되는 객체 안에서 [this] 연산자의 함수 또는 변수 위치를 참조하는 특징을 이용하여 클래스를 표현합니다.

 

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.protorype.area = function() {
    this.x = x;
    this.y = y;
}

Shape.prototype.area = function() {
    return 0;
}

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

 

위 코드는 [new Shape(0, 0)] 과 같은 함수 호출 시 this 객체에 해당하는 변수 혹은 함수가 prototype 객체에 선언된 변수, 함수를 함께 참조할 수 있습니다. 생성자 역할을 하는 Shape() 함수는 this.move에 함수를 정의하지 않았음에도 불구하고 prototype 객체에 move() 함수가 정의했으므로, prototype 선언 후 new 연산자를 사용하여 Shape() 함수를 호출 시 Shape 객체 s를 만들 수 있습니다. s는 prototype 객체 안에 있는 move() 함수를 참조하며, prototype에 추가로 정의된 area() 함수도 참조합니다. prototype 객체의 값을 객체의 내장 함수를 사용해 덮어씌우는 방식으로 클래스 상속을 사용할 수 있습니다.

 

 

 

ES6 문법::클래스 사용 방법

기존의 자바스크립트에서는 클래스 표현식이 없으므로, 함수를 생성자(constructor) 형태로 선언 후 변수나 함수를 prototype 객체에 할당함으로써 상속을 표현했는데,

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);
s.area(); //0

 

위 코드를 크롬 브라우저의 콘솔 창에서 실행하면, return 값은 [0] 이 되는 것을 확인할 수 있습니다.

ES6 클래스 사용 방법

 

위 코드를 보시면, [class] 키워드로  Shape 클래스를 정의한 것을 확인할 수 있으며, Shape 클래스 안에 constructor 함수도 추가된 것을 확인할 수 있습니다. 또한, 객체 생성 시 함께 만들어지는 변수, static을 편리하게 클래스 선언 블록 안에 함께 정의할 수 있도록 변경되었습니다. 단, static, constructor, 클래스 함수 정의 시 변수 선언을 위한 [var, let, const] 키워드는 사용하지 않습니다.

 

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

 

위 코드는 [extends] 키워드를 사용하여 상속을 나타냅니다. Circle 클래스는 [extends] 키워드를 사용함으로써 Shape 클래스를 상속할 수 있게 되었습니다. 상위 클래스 함수 호출을 위해서는 super() 함수를 사용하면 됩니다.