[모던 리액트 Deep Dive] 클래스

클래스란 무엇인가?

특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념

즉, 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 바로 클래스이다.

 

constructor : 객체를 생성하는 데 사용하는 특수한 메서드, 생성자 메서드

• 하나만 존재
• 생략 가능
• 여러 개 사용시 에러

class Car {
	constrctor (name) {
    	this.name = name
    }
}

 

프로퍼티 : 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값

const myCar = new Car('자동차') // 프로퍼티 값 : 자동차

 

getter와 setter

• getter : 클래스에서 무언가 값을 가져올 때 생성
• setter : 클래스 필드에 값을 할당할 때 사용

인스턴스 메서드 : 클래스 내부에 선언한 메서드

• 자바스크립트의 프로토타입에 선언되어 프로토타입 메서드라고도 함.

새롭게 생성한 객체에서 클래스에서 선언한 인스턴스 메서드에 접근할 수 있는 이유는, 메서드가 prototype에 선언되었기 때문이다.

class Car {
	constrctor(name) {
    	this.name = name
    }
    
    hello() {
    	console.log(`안녕하세요, ${this.name}입니다.`)
    }
}

클래스에서 인스턴스 메서드인 hello() 선언

const myCar = new Car('자동차')
myCar.hello() // 안녕하세요. 자동차입니다.

새롭게 생성한 객체 myCar에서 hello()에 접근할 수 있다. > 메서드가 prototype에 선언되었다.

 

정적 메서드 : 클래스의 인스턴스가 아닌 이름으로 호출

• 객체를 생성하지 않더라도 여러 곳에서 재사용이 가능하다.
• 인스턴스를 생성하지 않아도 사용할 수 있다.
• 인스턴스에서 접근할 수 없다.

class Car {
	static hello() {
    	console.log(`안녕하세요.`)
    }
}

const myCar = new Car()

myCar.hello() // TypeError
Car.hello() // 안녕하세요.

 

상속 : 기존 클래스를 상속받아서 자식 클래스에서 상속 받은 클래스를 기반으로 확장하는 개념

• 기존 클래스를 확장하여 새로운 클래스를 만드는 것
• extends 키워드를 사용하여 상속 구현.

A클래스를 extends한 B클래스가 생성한 객체에서도, B클래스가 따로 정의하지 않은 A클래스의 메서드를 사용할 수 있고, A클래스를 기반으로 다양하게 파생된 클래스를 만들 수 있다.

 

직접 객체에 선언하지 않았음에도 프로토타입에 있는 메서드를 찾아 실행을 도와줄 수 있는 이유는 프로토타입 체이닝덕분이다.

객체가 특정 속성을 찾을 때 자기 자신부터 시작해서 프로토타입을 타고 최상위 객체인 Object까지 훑기 때문이다.