(21.08.31)ES6 Class

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

🦄Javascript에서 class는 java와 같은 객체 지향 프로그래밍 언어에서 사용하는 것과 유사하게 class를 사용할 수 있게 하는 문법적 설탕으로, 기존의 prototype 문법을 대체해준다🦄

 

 

본문

---

사실 나는 class 문법이 굉장히 낯설다. Python을 배울 때도 클래스 부분은 "뭐 그냥 이런게 있다~"로만 알고 있었고, React는 함수 컴포넌트로 배웠기에 class를 이용할 일은 더더욱 없었다.

 

와리가리 야매로 달리던 댓가를 치뤘다. 회사 코드가 전부 class로 되어있었기 때문이다. 대충 lifeCycle 부분만 다르겠지~ 라는 안일한 생각을 가지고 있었는데, 기본이 없으니까 상당히 골을 썩혔다.

 

오늘 클래스 컴포넌트 내부에서 사용할 변수를 선언하려고 아래와 같이 코드를 짰다.

 

class Lorem extend React.Component{

// 중략
const spookyJelly = 'idiot' // error : const 예약어는 클래스 멤버 변수로 사용할 수 없습니다
}

 

엥? 이게 왜 안되지?? 라고 생각해서 const를 let으로도 바꿔봤는데, 역시 마찬가지였습니다. 

그래서 부끄럽지만 사수님께 여쭤봤는데, 정말 친절하게 잘 설명해주셨습니다.

 

요지는, class 안에서 만드는 변수, (포장하는 변수)는 멤버 변수라고 하는데, 이것은 객체 내부에서 사용하는 정보, 객체 내부 메소드에서 처리한 결과를 저장합니다.

 

근데 이 친구는 new로 인스턴스화 되기 전 까지 메모리에 할당이 안됩니다. 그냥 틀만 잡고 있을 뿐입니다.

그래서 const/ let 등 메모리에 살포시 올려주는 예약어와는 함께 사용이 안되는 것입니다.

 

그럼 class안에서는 const/ let을 아예 못쓰는거냐?라고 하면 그건 또 아닙니다.

class 안에서 선언한 멤버함수. 즉, 메서드 안에서는 (블럭 스코프 내에서는) 예약어 사용이 가능합니다.

 

요는, class 내부의 멤버들이 어느 시점에 생성이 되고, 메모리에 할당이 되는지가 중요하다는 겁니다.

 

설명이 조금 추상적이긴 한데, 그래도 나는 대충 감 잡은거 같다.

 

 

클래스 관련 기본 용어 정리

---

1. 인스턴스 - 객체를 의미한다. (클래스 문법으로 실제 쪄낸 친구)

2. 프로퍼티 - 클래스 내부에 만드는 변수, aka 멤버 변수

3. 메서드 - 클래스에 만드는 함수. aka 멤버함수. 주로 객체 프로퍼티 값 변경 및 탐색(setter, getter)등의 역할을 함

4. 생성자 - 인스턴스가 만들어지면서 자동으로 호출되는 함수

 

 

알아두면 좋을 것

---

Getter / Setter

---

//Getter

class Foo {
  constructor(arr = []) { // 생성자 함수
    this._arr = arr;
  }
 
  // getter는 반드시 무언가를 반환하여야 한다.
  get firstElem() {
    return this._arr.length ? this._arr[0] : null;
  }
}
 
const foo = new Foo([1, 2]);
// 프로퍼티 firstElem에 접근하면 getter가 호출된다.
console.log(foo.firstElem); // 1
//getter 메서드는 변수처럼 foo.firstElem 으로 사용한다. foo.firstElem()아님.


//Setter

class Foo2 {
  constructor(arr = []) {
    this._arr = arr;
  }
  //setter는 특이하게 파라미터를 한 개만 가질수 있다.
  set firstElem(elem) {
    // ...this._arr은 this._arr를 개별 요소로 분리한다
    this._arr = [elem, ...this._arr];
  }
}
 
const foo2 = new Foo2([1, 2]);
 
// 멤버 변수 lastElem에 값을 할당하면 setter가 호출된다.
// 마찬가지로 변수처럼 사용한다. foo.firstElem(100); 아님.
foo.firstElem = 100;
 
console.log(foo2.firstElem); // 100


출처: https://jeong-pro.tistory.com/120 [기본기를 쌓는 정아마추어 코딩블로그]

static 메서드

---

객체 인스턴스 생성 없이 클래스에서 직접 호출 가능한 메서드다.

🔥인스턴스에서 호출 불가하다. 반드시 클래스에서 호출해야한다.🔥

➡ 앱 전역에서 사용하는 유틸리티 함수를 만들 때 유용

class Foo {
  constructor(prop) {
    this.prop = prop;
  }
  static staticMethod() {
    return 'staticMethod';
  }
  prototypeMethod() {
    return 'prototypeMethod';
  }
}
 
const foo = new Foo(123);
 
console.log(Foo.staticMethod());
console.log(foo.staticMethod()); // Uncaught TypeError: foo.staticMethod is not a function


출처: https://jeong-pro.tistory.com/120 [기본기를 쌓는 정아마추어 코딩블로그]

 

클래스 상속

---

extends 키워드로 상속받아 부모 클래스의 메서드등을 오버라이드할 수 있다.

// Base Class
class Animal {
  constructor(weight) {
    this._weight = weight;
  }
  weight() { console.log(this._weight); }
  eat() { console.log('Animal eat.'); }
}
 
// Sub Class
class Human extends Animal {
  constructor(weight, language) {
    super(weight);
    this._language = language;
  }
 
  // 부모 클래스의 eat 메소드를 오버라이드하였다
  eat() { console.log('Human eat.'); }
 
  speak() {
    console.log(`Koreans speak ${this._language}.`);
  }
}
 
const korean = new Human(70, 'Korean');
korean.weight(); // 70
korean.eat();    // Human eat.
korean.speak();  // Koreans speak Korean.
 
console.log(korean instanceof Human);  // true
console.log(korean instanceof Animal); // true


출처: https://jeong-pro.tistory.com/120 [기본기를 쌓는 정아마추어 코딩블로그]

 

*super()

---

super는 부모클래스의 constructor 메서드를 호출하거나 부모 클래스의 프로퍼티 (멤버 변수)를 참조 할 때 쓴다.

🔥자식 클래스의 constructor에서 super()메서드를 호출하지 않으면 에러가 난다.🔥

🔥super() 호출 이전 this를 참조할 수 없다..🔥

🔥부모클래스의 정적(static) 메서드도 상속됨. 마찬가지로 자식클래스의 일반 메서드에서 부모클래스의 static 메서드에 접근 불가🔥

 

 

참고 사이트

---

https://jeong-pro.tistory.com/120

ES6 Class (클래스, Syntactic sugar, prototype을 이용하지만 문법적으로 예쁘게 만들어주는 class)

http://poiemaweb.com/es6-class

Class | PoiemaWeb