ES6 / 클래스 / 1편 / 클래스 선언과 표현식

ES6부터는 클래스 정의해서 사용가능해짐.

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

ES6에서는 class 키워드로 클래스를 정의하므로 코드가 훨씬 간결해짐.

 

현재로서는 함수형 컴포넌트가 대세라는데 클래스형도 배워놔야한대서 정리해볼까함.

 

클래스 선언은 아래와같이 하면됨.

 - 작명해주고

 - 클래스키워드 써줘야함 (constructor)

 

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

클래스선언과 함수선언의 차이점은 함수선언은 호이스팅이 일어나지만 클래스선언은 그렇지 않다는 점이다.

// 호이스팅에 관해서는 다음에 자세히 다루기로.

암튼 클래스를 쓰려면 클래스 선언을 먼저 해줘야한다. 밑에처럼 쓰면 레퍼런스 오류난다.(클래스 표현식 쓸 때도 마찬가지.)

서순조심.(｡･∀･)ﾉﾞ

const p = new Rectangle(); // ReferenceError

class Rectangle {}

 

클래스 표현식은 아래와 같음

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle2"

이게 뭐 중요한건가? 싶지만 모질라가 공식문서에 써놨으니 중요한거겠쥬?

요약하자면, 이름 안정해주면 클래스가 몸담고있는 body의 이름을 따라가고 이름을 정해주면 정해준대로 간다는 뜻.

클래스 표현식의 이름은 Class body의 local scope에 한해 유효함 🔭

 

Class body는 {} 중괄호 안쪽으로 묶인 부분임. constructor 나 내가 사용할 메서드같은 Class멤버를 정의하는 곳.

 

Class body와 메서드 정의는 다음시간에.