이전 글에서는 생성자 함수와 프로토타입에 대해서 알아봤습니다. 사실 앞의 두 개념은 Es6 문법이 아닌 구식의 문법으로 class 설명을 위해서 꼭 필요한 내용이었습니다. 따라서 오늘 알아볼 class가 객체 지향의 핵심입니다.
class 문법은 Es6에 추가 된 새로운 문법으로 기존의 생성자 함수와 마찬가지로 객체를 찍어낼 수 있는 기능이 있습니다. class는 연관이 있는 데이터들을 한 곳에 저장할 수 있어 일종의 컨테이너라고 생각하면 이해가 빠를겁니다.
class 생성 방법
예시1. class 생성
class User{
constructor(name ,age){
this.name = name;
this.age = age;
}
}class를 생성하려면 class 키워드를 사용해야 하고 첫 글자가 대문자로 시작하는 영어단어 작명을 해야 합니다. 그리고 constructor라는 내부 함수를 하나 선언하는데 이 함수가 곧 생성자 함수에 사용하는 것과 같은 기능을 수행하며 파라미터를 constructor 함수에 넣어주면 되겠습니다.
class를 사용하려면 반드시 constructor() 함수 내부에 프로퍼티를 선언해줘야 합니다. 또한 constructor() 함수는 class 하나에 오직 하나만 존재해야하기 때문에 중복 사용이 불가능합니다.
예시2. 인스턴스 생성
let user1 = new User('아이유', 29);
let user2 = new User('이지은', 30);
let user3 = new User('이지금', 31);class를 사용해서 인스턴스를 생성하려면 new라는 키워드를 반드시 사용해야 하며 인스턴스 생성시 대입하는 인자값을 class 내부의 constructor가 받아서 처리합니다.
지금까지 class와 class를 사용한 인스턴스 생성 방법에 대해 알아봤는데 class를 만드는 방법이 생성자 함수와 매우 유사하다는 것을 알 수 있습니다.
class 문법 사용 이유
"뭐야...? 왜 똑같은 문법이 두 개나 있는거에요...?"
겉으로 보기에나 기능적으로나 생성자 함수와 별반 다를게 없어보이지만 차이점은 분명히 있습니다. 흔히 class 문법을 가르켜 '문법적 설탕(syntactic sugar)' 이라고도 합니다. 문법적 설탕이란, 쉽게 말해 코드가 직관적이고 쉬워진다는 뜻으로 class 문법을 사용하면 기능은 같지만 생성자 함수보다 코드의 양을 줄일 수 있어 효과적입니다.
예시3. 생성자 함수 프로토타입 생성
function Obj() {}
Obj.prototype.method = function () {}예시4. class 문법 프로토타입(메서드) 생성
class Obj {
method() {}
}프로토타입(prototype)을 사용해서 메서드를 선언하는 방식을 비교해보면, class 문법이 훨씬 더 간결하고 직관적입니다. 새로운 문법이니 만큼 기존의 구형 문법을 보완했다고 할 수 있죠.
class 상속
예시5. class 프로퍼티 상속 기능
class Grandpa {
constructor(name){
this.name = name;
}
};class 문법의 상속은 조금 특별합니다. 같은 class간 상속이 가능해 class를 하나 잘 만들어 놓으면 다른 곳에서도 유용하게 사용이 가능합니다. 일단 먼저 class를 하나 생성합시다.
class Father extends Grandpa{
constructor(name){
super(name);
}
}
let grandpa = new Grandpa('김춘삼'); //Grandpa {name: "김춘삼"}
let father = new Father('김춘식'); //Father {name: "김춘식"}마찬가지로, 상속 받을 Father class를 하나 더 생성했는데 extends 키워드와 super()라는 함수가 눈에 띕니다.
먼저 extends란 '출처'라고 생각하면 되겠습니다. Father라는 클래스가 Grandpa라는 출처(extends)로 부터 왔다고 알려주는 키워드이지요. 또한 Father는 Grandpa의 내부 프로퍼티나 메소드를 호출하기 위해 super()라는 함수를 사용해야 합니다. 만약 상속받은 class가 super() 함수를 선언하지 않는다면 에러가 발생하니 반드시 사용하도록 합시다.
위 예시에서 Father는 내부에 super()라는 항목 하나만 입력해준 상태지만 결과적으로 Grandpa와 같은 결과가 출력됩니다.
예시6. class 메서드 상속 기능
class Grandpa {
constructor(name){
this.name = name;
this.sayHello = function(){ // constructor 내부 선언
console.log(`안녕하세요. ${this.name} 입니다.`)
}
}
sayHi(){ // constructor 외부 선언
console.log(`안녕. ${this.name} 이야.`)
}
father.sayHello() //안녕하세요. 김춘식 입니다.
father.sayHi() //안녕. 김춘식 이야.
};class는 프로퍼티 뿐만 아니라 메서드 역시 상속이 가능합니다. constructor 내부에 선언하는 방식과
constructor 외부 프로토타입을 활용하는 두 가지 방법 모두 사용이 가능합니다.
차이점이라면 constructor 내부에 메서드를 생성하면 상속받은 자식이 '직접' 메서드를 상속받지만,
프로토타입을 활용한 상속은 부모에게 있는 메서드를 자식이 '참조'만 한다는 것입니다.
정리
class 문법
1. class를 사용하면 객체를 찍어낼 수 있다.
2. 생성자 함수와 유사하지만 코드를 줄일 수 있는 '문법적 설탕(syntactic sugar)'의 이점이 있다.
3. class에 프로토타입을 활용하면 메서드를 더 쉽게 만들 수 있다.
4. class간 프로퍼티와 메서드를 그대로 받아서 사용할 수 있는 상속 기능이 있다.
5. 상속을 받은 class는 extends키워드와 super() 함수를 반드시 사용해야한다.
다음 글에서 이어집니다.
