[모던 리액트 Deep Dive] 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트

1.3 클래스

16.8 버전이 나오기 전까지는 리액트에서는 모든 컴포넌트가 클래스로 작성

1.3.1 클래스란 무엇인가?

• 자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 탬플릿과 같은 개념
• 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것
• 자바스크립트에서 클래스로 하는 모든 것들을 함수로도 동일하게 표현할 수 있음

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


    honk() {
        console.log('${this.name}이 경적을 울립니다!')
    }

    static hello() {
        console.log('저는 자동차입니다')
    }

    set age(value) {
        this.carAge = value
    }

    get age() {
        return this.carAge
    }
}

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

// 메서드 호출
myCar.honk()

// 정적 메서드는 클래스에서 직접 호출한다.
Car.hello()

// 정적 메서드는 클래스로 만든 객체에서는 호출할 수 없다.
myCar.hello()

// setter를 만들면 값을 할당할 수 있다.
myCar.age = 32

// getter로 값을 가져올 수 있다.
console.log(myCar.age, myCar.name)

 

constructor

• constructor는 생성자로, 객체를 생성하는 데 사용하는 특수한 메서드
• 단 하나만 존재, 여러 개를 사용하면 에러 발생
• 생성자에서 별다르게 수행할 작업이 없다면 생략 가능

프로퍼티

• 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값
• 기본적으로 인스턴스 생성 시 constructor 내부에는 빈 객체가 할당돼 있는데 이 빈 객체에 프로퍼티의 키와 값을 넣어ㅓㅅ 활용 가능
• #을 붙여서 private을 선언하는 방법이 ES2019에 추가됐고, 타입스크립트를 활용하면 접근 제한자인 private, protected, public를 사용할 수 있음
• 자바스크립트에서는 기본적으로 모든 프로퍼티가 public

getter와 setter

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

class Car{
	constructor(name) {
    	this.name = name
    }
    
    get firstCharacter() {
    	return this.name[0]
    }
    
    set firstCharacter(char) {
    	this.name = [char, ...this.name.slice(1)].join('')
    }
}

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

myCar.firstCharacter // 자

// '차'를 할당한다.
myCar.firstCharacter = '차'

console.lg(myCar.firstCharacter, myCar.name)

 

인스턴스 메서드

• 클래스 내부에서 선언한 메서드
• 실제로 자바스크립트의 prototype에 선언되므로 프로토타입 메서드로 불리기도 함
  
  • Object.getPrototypeOf

프로토타입 체이닝

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

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

 

정적 메서드

• 클래스의 인스턴스가 아닌 이름으로 호출할 수 있는 메서드

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

const myCar = new Car()

myCar.hello()
Car.hello()

• 정적 메서드 내부의 this는 클래스로 생성된 인스턴스가 아닌, 클래스 자신을 가리키기 때문에 다른 메서드에서 일반적으로 사용하는 this를 사용할 수 없음
• 리액트 클래스 컴포넌트 생명주기 메서드인 static getDerivedStateFromProps(props, state)에서는 this.state에 접근할 수 없음
• 정적 메서드는 비록 this에 접근할 수 없지만 인스턴스를 생성하지 않아도 사용할 수 있음
• 생성하지 않아도 접근할 수 있기 때문에 여러 곳에서 재사용 가능
• 전역에서 사용하는 유틸 함수를 정적 메서드로 많이 활용

상속

• 클래스 컴포넌트를 만들기 위해서 extends React.Component 또는 extends React.PureComponent를 선언한 것
• extends는 기존 클래스를 상속받아서 자식 클래스에서 이 상속받은 클래스를 기반으로 확장하는 개념

1.3.2 클래스와 함수의 관계

• 클래스 작동을 생성자 함수로 매우 유사하게 재현할 수 있음
• 클래스가 작동하는 방식은 자바스크립트의 프로토타입을 활용하는 것
  • 클래스는 객체지향 언어를 사용하던 다른 프로그래머가 좀 더 자바스크립트에 접근하기 쉽게 만들어줌(문법적 설탕)

1.3.3 정리

• 자바스크립트의 클래스도 객체를 생성하기 위해 도움이 되는 여러 기능을 제공
• 이해해보기
  • 클래스 컴포넌트에 어떻게 생명주기를 구현할 수 있는지
  • 왜 클래스 컴포넌트 생성을 위해 React.Component나 React.PureComponent를 상속하는지
  • 메서드가 화살표 함수와 일반 함수일 때 어떤 차이가 있는지