[모던 리액트 Deep Dive] 1장 자바스크립트의 클래스란?

 

 

자바스크립트 클래스란 무엇인가?

자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념이다.  따라서 클래스는 특정한 형태의 객체를 반복적으로 만들기 위해 사용하는 것이다.

 

자바스크립트 클래스의 코드에는 어떤 것이 있는지 하나씩 뜯어보자!

 

 

생성자

 

constructor는 생성자이며 객체를 생성하는 데 사용하는 특수한 메서드이다.  단 하나만 존재할 수 있으며 기본 생성자에서 별다르게 수행할 작업이 없다면 생략하는 것도 가능하다.

class Car {
	constructor (name) {
    	this.name = name
    }
    
    // SyntaxError: A class may only have one constructor
    constructor (name) {
    	this.name = name
    }
}

class Car {
	// constructor가 없어도 마치 있는것처럼 컴파일 해준다.
    // 생략 가능 O
}

 

 

프로퍼티

 

프로퍼티란 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값을 의미한다.  

기본적으로 인스턴스 생성 시 constructor 내부에서 빈 객체가 할당되어 있는데 빈 객체에 프로퍼티의 키와 값을 넣어서 활용할 수 있게 해준다.  그리고 타입스크립트를 활용하면 다른 언어와 마찬가지로 접근제한자 private, protected, public을 사용할 수 있다.

class Car {
	constructor(name) {
    	// property 할당
    	this.name = name
    }
}

// property 값을 넘겨준다.
const myCar = new Car('자동차')

 

 

getter와 setter

 

getter란 클래스에서 어떤 값을 가져올 때 사용한다.  setter란 클래스 필드에 값을 할당할 때 사용한다.

class Car {
	constructor(name) {
    	this.name = name
    }
    
    get firstCharacter() {
    	return this.name[0]
    }
}

const myCar = new Car('자동차')

myCar.firstCharacter  // 자

 

 

인스턴스 메서드

 

인스턴스 메서드 (instance method) 는 클래스 내부에서 선언한 메서드이다.  인스턴스 메서드는 실제로 자바스크립트의 prototype에 선언되므로 프로토타입 메서드 (prototype method)로 부른다.

class Car {
	constructor(name) {
    	this.name = name
    }
    
    // Define instance method
    hello() {
    	console.log(`안녕하세요. ${this.name}입니다.`)
    }
}

 

 

프로토타입 메서드 (prototype method)라고 불리는 이유는 메서드가 prototype에 선언됐기 때문이다. 

const myCar = new Car('자동차')

Object.getPrototypeOf(myCar)  // {constructor: f, hello: f}
Object.getPrototypeOf(myCar) === Car.prototype  // true

 

 

직접 객체에서 선언하지 않았음에도 프로토타입에 있는 메서드를 찾아서 실행을 도와주는 것을 바로 프로토 타입 체이닝이다.  모든 객체는 프로토타입을 가지고 있는데, 특정 속성을 찾을 때 자기 자신부터 시작해서 이 프로토타입을 타고 최상위 객체인 Object까지 훑는다.

 

결론적으로 이 프로토타입과 프로토타입 체이닝이라는 특성 덕분에 생성한 객체에서도 직접 선언하지 않은, 클래스에 선언한 hello() 메서드를 호출할 수 있고 메서드 내부에서 this도 접근해 사용할 수 있다. 

 

 

상속

 

상속은 extends를 통해 기존 클래스를 상속받아서 자식 클래스에서 상속받은 클래스를 기반으로 확장하는 개념이다.  그리고 아래 코드처럼 Car를 extends한 Truck이 생성한 객체에서도, Truck이 따로 정의하지 않은 honk 메서드를 사용할 수 있다.

class Car {
	constructor(name) {
    	this.name = name
    }
    
    honk() {
    	console.log(`${this.name}이/가 경적을 울립니다!`)
    }
}

class Truck extends Car {
	// 부모 클래스 Car의 constructor를 호출한다.
	constructor(name) {
    	super(name)
    }
    
    load() {
    	console.log('${this.name}에 짐을 싣습니다.')
    }
}

const myCar = new Car('자동차')
myCar.honk()  // 자동차이/가 경적을 울립니다.

const truck = new Truck('트럭')
truck.honk()  // 트럭이/가 경적을 울립니다.
truck.load()  // 트럭이/가 짐을 싣습니다.

 

 

정리

이제 우리가 클래스를 조금이라도 이해했다면 이후에 클래스형 컴포넌트에 어떻게 생명주기를 구현할 수 있는지, 왜 클래스형 컴포넌트 생성을 위해 React.Component나 React.PureComponent를 상속하는지, 메서드가 화살표 함수와 일반 함수일 때 어떤 차이가 있는지 이해할수 있을 것이다. 

 

 

 

출처 : 모던 리액트 Deep Dive