1.3 클래스
클래스란 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념이다. 즉, 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 바로 클래스다.
- 클래스가 나오기 이전에는 클래스라는 개념이 없어 객체를 만드는 템플릿 같은 역할을 함수가 도맡아 했었다.
- 반대로 말하면, 우리가 자바스크립트에서 클래스로 하는 모든 것들을 함수로도 동일하게 표현할 수 있다.
클래스 내부 구조
constructor
- constructor는 생성자로, 이름에서 알 수 있는 것처럼 객체를 생성하는 데 사용하는 특수한 메서드다.
- 단 하나만 존재할 수 있으며, 생성자에서 별다르게 수행할 작업이 없다면 생략 가능하다.
프로퍼티
- 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값을 의미한다.
- 기본적으로 인스턴스 생성 시 constructor 내부에는 빈 객체가 할당돼 있는데, 바로 이 빈 객체에 프로퍼티 키와 값을 넣어서 활용할 수 있게 도와준다.
- JS는 기본적으로 public이고, 타입스크립트에서는 private, protected, public을 사용할 수 있다.
getter
- getter란 클래스에서 무언가 값을 가져올 때 사용된다.
- get을 앞에 붙여야 하고, 뒤 이어서 getter의 이름을 선언해야 한다.
setter
- setter란 클래스 필드에 값을 할당할 때 사용한다.
- set이라는 키워드를 먼저 선언하고, 그 뒤를 이어서 이름을 붙이면 된다.
인스턴스 메서드(프로토타입 메서드)
- 클래스 내부에서 선언한 메서드를 인스턴스 메서드라고 한다.
- 이 인스턴스 메서드는 실제로 JS의 prototype에 선언되므로 프로토타입 메서드로 불리기도 한다.
- Car라는 클래스를 선언하고, 그 내부에 hello라고 하는 인스턴스 메서드를 정의했다.
Object.getPrototypeOf(myCar) === Car.prototype // true- 인스턴스에서 hello()에 접근할 수 있는 이유는, 메서드가 생성자 Car의 prototype에 선언됐기 때문이다.
- 프로토타입의 더 자세한 개념은 https://winjabonjooyui.tistory.com/entry/코어-자바스크립트-06-프로토타입 이 글을 참고하면 된다.
정적 메서드
- 정적 메서드는 인스턴스가 아닌 클래스의 이름으로 호출할 수 있는 메서드다.
- 정적 메서드 내부의 this는 인스턴스가 아닌, 클래스 자신을 가리키기 때문에 다른 메서드에서 일반적으로 사용하는 this를 사용할 수 없다.
- 이러한 이유로 리액트 클래스형 컴포넌트 생명주기 메서드인 static getDerivedStateFromProps(props, state)에서는 this.state에 접근할수 없다.
- 정적 메서드는 인스턴스를 생성하지 않아도 사용할 수 있기 때문에 여러 곳에서 재사용이 가능하다는 장점이 있다.
- 이 때문에 애플리케이션 전역에서 사용하는 유틸 함수를 정적 메서드로 많이 활용하는 편이다.
상속
- 리액트에서는 클래스형 컴포넌트를 만들기 위해서 extends React.Component 또는 extends React.PureComponent와 같이 선언한다.
- 기존 클래스를 상속받아서 자식 클래스에서 상속받은 클래스를 기반으로 확장하는 개념이다.
- Car를 extends한 Truck이 생성한 객체에서도, Truck이 따로 정의하지 않은 honk 메서드를 사용할 수 있는것을 볼 수 있다.
클래스는 객체지향 언어를 사용하던 다른 프로그래머가 좀 더 자바스크립트에 접근하기 쉽게 만들어주는,
일종의 문법적 설탕(syntactic sugar)의 역할을 한다고 볼 수 있다.
또한 자바스크립트 클래스는 프로토타입을 기반으로 작동한다는 사실도 확인할 수 있다.