여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - ES6 - 클래스
React – ES6 – 클래스
5개월전 작성
5개월전 수정

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
밍구
공부 목적 블로그