React ES6

클래스

ES6는 클래스를 도입했다.

클래스는 함수의 일종이지만 키워드 함수를 사용하여 시작하는 대신 키워드 클래스를 사용하고 속성은 constructor() 메서드 내부에 할당된다.

예제 1

class Car {
  constructor(name) {
    this.brand = name;
  }
}

예제 2

Car 클래스를 기반으로 “mycar”라는 객체를 만든다.

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

클래스의 메소드

클래스에 자신만의 메서드를 추가할 수 있다.

예제

“present”라는 메서드를 만든다.

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

클래스 상속

클래스 상속을 생성하려면 extends 키워드를 사용한다.

클래스 상속으로 생성된 클래스는 다른 클래스의 모든 메서드를 상속한다.

예제

“Car” 클래스의 메서드를 상속할 “Model”이라는 클래스를 만든다.

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기