[자바스크립트 ES6] 04

☝🏻 러닝 리액트를 읽고 정리한 글입니다.

✅ 2. 클래스

• 요즘 리액트는 클래스보다 함수를 사용해 컴포넌트를 구성하는 추세
  다만 레거시 리액트 코드나 다른 자바스크립트에서는 아직도 쓰고 있다.

📍 프로토타입을 사용한 상속

• 객체지향처럼 느껴지는 구조를 만들어내기 위한 기법, new를 사용해 생성자를 호출한다.

function Vacation(dest,len){
    //property
    this.dest=dest;
    this.len=len;
}

Vacation.prototype.print = function (){
    console.log(this.dest+"은"+this.len+"일 걸린다.");
}

const maui = new Vacation("마우이",2);
maui.print();

위 코드는 객체지향 언어의 커스텀 타입과 비슷한 느낌의 물건을 만들어 낸다.

마찬가지로 property, method가 있으며 인스턴스는 prototype을 통해 메서드를 상속받음.

• 클래스는 ES 2015 이후로 추가되었다. 함수는 객체이며 상속은 프로토타입을 통해 처리된다.
• 함수는 객체이며 상속은 프로토타입을 통해 처리된다.
• 클래스를 만들고 나면 new 키워드를 사용해 해당 클래스의 새로운 인스턴스를 만들 수 있음.
  그 후, 인스턴스의 메서드를 호출.

class Vac{
    constructor(dest,len){
        this.dest=dest;
        this.len=len;
    }
    print(){
        console.log(`${this.dest}은 ${this.len}입니다.`)
    }
}

const trip = new Vac("산티아고",7);
console.log(trip.print());

• 클래스 객체를 만들고 나면 새로운 객체를 생성하기 위한 원하는 만큼 new를 호출할 수 있음

• 기존의 클래스를 확장한 새로운 클래스는 상위 클래스의 모든 프로퍼티와 메서드를 상속

• 상속한 메서드나 프로퍼티를 하위 클래스 선언 안에서 변경,
  하지만 디폴트로 모든 메서드와 프로퍼티가 상속

• 하위 클래스는 상위 클래스의 프로퍼티를 상속

• 상속을 사용해 만든 하위 클래스의 인스턴스를 만들 때도 상위 클래스의 인스턴스를 생성할 때와
  마찬가지로 new 키워드를 상속