리액트 개발을 위해 꼭 알아야 할 자바스크립트 - 클래스

1.3.1 클래스란 무엇인가?

 

자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념이다.

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

 

 

constructor

• 생성자. 객체를 생성하는 데 사용하는 특수한 메서드이다.
• 단 하나만 존재할 수 있고, 여러 개를 사용한다면 에러가 발생한다.

 

프로퍼티

• 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값을 의미한다.
• 인스턴스 생성 시 constructor 내부에 빈 객체에 프로퍼티의 키와 값을 넣어 활용할 수 있다.
• #을 넣어 private를 선언할 수 있다.

class Car {
  constructor(name) {
   // 값을 받으면 내부에 프로퍼티로 할당된다.
   this.name = name
  }
}

const myCar = new Car('자동차') // 프로퍼티 값을 넘겨주었다.

 

getter 와 setter

• getter란 클래스에서 무언가 값을 가져올 때 사용된다.
• getter을 사용하려면 get을 앞에 붙이고 뒤이어 getter의 이름을 선언하면 된다.

• setter란 클래스 필드에 값을 할당할 때 사용한다.
• set이라는 키워드를 먼저 선언하고, 뒤이어 이름을 붙이면 된다.

 

인스턴스 메서드

• 클래스 내부에서 선언한 메서드를 인스턴스 메서드 라고 한다.
• 자바스크립트의 prototype에 선언되기 때문에 프로토타입 메서드로 불리기도 한다.

 

프로토타입 체이닝

- 직접 객체에서 선언하지 않았음에도 프로토타입이 있는 메서드를 찾아 실행을 도와주는 것

 

모든 객체는 프로토타입을 가지고 있고, 특정 속성을 찾을 때 자기 자신부터 시작해 이 프로토타입을 타고

최상위 객체인 Object까지 훑는다.

> 이와 비슷한 원리 : toString

 

프로토타입과 프로토타입 체이닝이라는 특성 덕분에 생성한 객체에서도 직접 선언하지 않은,

클래스에 선언한 메서드를 호출할 수 있고, 이 메서드 내부에서 this도 접근해 사용할 수 있게 된다.

 

 

정적 메서드

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

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

const myCar = new Car()

myCar.hello() // Uncaught TypeError: myCar.hello is not a function
Car.hello() // 안녕하세요!

 

정적 메서드 내부의 this는 클래스 자신을 가리키기 때문에 다른 메서드에서 일반적으로 사용하는 this를 사용할 수 없다.

비록 this에 접근할 수 없지만 인스턴스를 생성하지 않아도 사용할 수 있고, 생성하지 않아도 접근할 수 있기 때문에

객체를 생성하지 않아도 여러 곳에서 재사용이 가능하다는 장접이 있다.

>> 전역에서 사용하는 유틸 함수를 정적 메서드로 많이 활용한다.

 

 

상속

• extends는 기존 클래스를 상속받아 자식 클래스에서 이 상속받은 클래스를 기반으로 확장하는 개념이다.
• extends를 활용하면 기본 클래스를 기반으로 다양하게 파생된 클래스를 만들 수 있다.

 

 

1.3.2 클래스와 함수의 관계

 

클래스가 작동하는 방식은 자바스크립트의 프로토타입을 활용하는 것이다.

클래스틑 객체지향 언어를 사용하던 다른 프로그래머가 좀 더 자바스크립트에 접근하기 쉽게 만들어주는,

일종의 문법적 설탕의 역할을 한다고 볼 수 있다.