(React) 기초 - 클래스

ES2015이전에는 공식적으로 자바스크립트 명세에 클래스 문법이 없었다. 클래스가 도입되면서 자바나 C++ 과 같은 전통적인 객체지향 언어와 비슷한 구문을 제공한다는 점으로 인해 흥분한 개발자들이 많았다. 과거 몇 년간은 리액트 라이브러리가 사용자 인터페이스 컴포넌트를 만들때 클래스에 주로 의존했다. 오늘날, 리액트는 점차 클래스를 멀리하기 시작했고, 함수를 사용해 컴포넌트를 구성한다. 하지만 레거시 리엑트 코드나 다른 자바 스크립트 세계에서 클래스를 자주 볼 것이다. 따라서 간단하게 클래스에 대해 살펴보자. 

 

자바스크립트는 프로토타입을 사용한 상속라고 불리는 방법을 사용한다. 이 기법은 객체지향처럼 느껴지는 구조를 만들어내기 위한 기법이다. 예를 들어, new를 사용해 호출해야 하는 Vacation 생성자를 다음과 같이 정의할 수 있다. 

 

function Vacation(destination, length) {
	this.destination = destination;
    this.length = length;
}

Vacation.prototype.print = function() {
	console.log(this.destination + "은(는) " + this.length + " 일 것입니다.");
};

const maui = new Vacation("마우이", 7);

maui.print(); // 마우이은(는) 7일 걸립니다.

 

이 코드는 객체지향 언어의 커스텀 타입과 비슷한 느낌의 물건을 만들어 낸다. Vacation에는 프로퍼티 (destination, length)들과 메서드(print)가 있다. maui 인스턴스는 프로토타입을 통해 print 메서드를 상속받는다. 더 표준적인 클래스에 익숙한 개발자라면 이런 방식에 상당히 화가 날 수도 있다. 이런 화를 가라앉히기 위해 ES2015에는 클래스 선언이 추가됐다. 하지만 바자스크립트는 여잔히 기존의 방식과 같이 작동한다. 함수는 객체이며 상속은 프로토타입을 통해 처리된다. class는 단지 이 기가 막힌 프로토타입 구문에 대한 구문적 편의를 제공할 뿐이다. 

 

class Vacation {
	
    constructor (destination, length) {
    	this.destination = destination;
        this.length = length;
    }
    
    print() {
    	console.log('${this.destination}은(는) ${this.length} 일 걸립니다. ');
    }
}

 

클래스를 만들때는 보통 클래스 이름의 첫 글자를 대문자로 표시한다. 클래스를 만들고 나면 new 키워드를 사용해 해당 클래스의 새로운 인스턴스를 만들 수 있다. 그 후, 인스턴스의 메서드를 호출할 수 있다. 

const trip = new Vacation("칠레 산티아고", 7);

console.log(trip.print()); // 칠레 산티아고은(는) 7일 걸립니다.

 

클래스 객체를 만들고 나면 새로운 객체를 생성하기 위해 원하는 만큼 new를 호출할 수 있다. 클래스를 확장할 수도 있다. 기존의 클래스(부모 또는 상위 클래스)를 확장한 새로운 클래스(자식 또는 하위 클래스)는 상위 클래스의 모든 프로퍼티와 메서드를 상속한다. 이렇게 상속한 메서드나 프로퍼티를 하위 클래스 선언 안에서 변경할 수도 있다. 하지만 디폴트로 모든 메서드와 프로퍼티가 상속될 것이다. 

 

Vacation을 여러 가지 휴가 타입을 정의하기 위한 추상 클래스토 사용할 수도 있다. 예를 들어 Expedition은 Vacation 클래스를 확장하되 장비를 표현하는 프로퍼티(gear)를 포함한다. 

 

class Expedition extends Vacation {
	
    constructor(destination, length, gear){
        super(destination, length);
        this.gear = gear;
    }
    
    print() {
    	super.print();
        console.log('당신의 ${this.gear.join("와(과) 당신의 "}}를(을) 가져오십시오.');
    }
}

 

여기서 간단한 상속관계를 볼 수 있다. 하위 클래스는 상위 클래스의 프로퍼티를 상속한다. print()에서는 상위 클래스에 있는 print()를 호출한 다음에 Expedition에 있는 추가 정보를 출력했다. 상속을 사용해 만든 하위 클래스의 인스턴스를 만들때도 상위 클래스의 인스턴스를 생성할 때와 마찬가지로 new 키워드를 사용한다. 

const trip2 = new Expedition("한라산", 3, ["선글라스", "오색깃발", "카메라"]);
trip2.print();

// 한라산은(는) 3일 걸립니다.
// 당신의 선글라스와(과) 당신의 오색 깃발와(과) 당신의 카메라를(을) 가져오십시오.