[모던 리액트 딥다이브] 1.3장 클래스

 

클래스란

• 자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿
• 클래스를 활용하면 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리하게 할 수 있음

class Car {
	// 생성자
	constructor(name) {
    	this.name = name;
    }
    
    // 메서드
    hook() {
    	console.log('경적을 울립니다');
    }
    
    // 정적 메서드
    static hello() {
    	console.log('안녕, 자동차야!');
    }
    
    // setter
    set age(value) {
    	this.carAge = value
    }
    
    //getter
    get age() {
    	return this.carAge
    }
}

 

 

 

클래스 내부 특징

• constructor
  • 생성자
  • 객체를 초기화할 때 사용하는 특수한 메서드
  • 단 하나만 존재할 수 있음
• 프로퍼티
  • 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값
• getter
  • 클래스에서 무언가 값을 가져올 때 사용
  • get 키워드를 앞에 붙여야 함
• setter 
  • 클래스 필드에 값을 할당할 때 사용
  • set 키워드를 앞에 붙여야 함
• 인스턴스 메서드
  • 클래스 내부에서 선언한 메서드
  • 자바스크립트의 prototype에 선언되므로 프로토타입 메서드라고 불리기도 함
• 정적 메서드
  • 클래스의 인스턴스가 아닌 클래스 이름으로 호출할 수 있는 메서드
  • 정적 메서드 내부의 this는 클래스 자신을 가리킴
  • 따라서 리액트 클래스 컴포넌트 생명주기 메서드인 getDerivedStateFromPops에서는 this.state에 접근할 수 없음
  • 인스턴스를 생성하지 않아도 사용할 수 있음
  • 여러 곳에서 재사용이 가능함
  • 전역에서 사용하는 유틸 함수를 정적 메서드로 많이 활용함
• 상속
  • extends 키워드로 기존 클래스를 상속받아 자식 클래스에서 이를 기반으로 확장함

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