클래스를 정의하면서 내가 한 실수들

※ 타입스크립트 공부 중 다시 알게된 것들 ... 2가지 ※

---

#1. 서브 클래스에서 super 키워드 누락

Java를 공부하면서 분명 숙지하고 있던 내용인데, 이번에 제대로 알고 가는 계기가 되었다.

// 기본 클래스
class Animal {
  distance: number;

  constructor(dist: number) {
    this.distance = dist;
  }

  move() {
    console.log(this.distance + "m 움직였습니다.");
  }
}

// 상속받은 서브 클래스
class Snake extends Animal {
  constructor(dist: number) { // 에러 발생!, 클래스의 생성자는 'super' 호출을 포함해야 합니다.
  }

  move() {
    super.move();
  }
}

상속받은 서브 클래스에서 super 키워드를 통해 부모의 생성자를 호출해줘야 한다.
그 이유는 2가지로 나눌 수 있다.

1. 상속관계의 클래스 초기화
   • 서브 클래스 Snake 에서 super()를 통해 기본 클래스 Animal의 생성자를 호출함으로,
     상속 관계가 올바르게 설정되고 클래스가 제대로 초기화될 수 있다.....고 한다.
   • 서브 클래스에서 super()를 통해 기본 클래스의 생성자를 호출해야 제대로 초기화가 된다.

2. 부모 클래스의 상태 초기화
   • 기본 클래스 Animal 의 생성자는 클래스의 초기 상태를 설정하는 역할을 한다.
   • 기본 클래스 생성자 호출을 생략하면. 예기치 못한 동작이 발생 할 수 있다.
   • 여기서 상태 란 객체의 상태를 뜻하는 멤버 변수(필드) 를 의미한다.

앞으로는 까먹지 않고 잘 해야겠다.

---

#2. 화살표 함수 사용

React를 하면서 지나친 화살표 함수로 인해, 다음과 같은 실수를 범했다

class Animal {
  distance: number;

  constructor(dist: number) {
    this.distance = dist;
  }

  move = () => {
    console.log(this.distance + "m 움직였습니다.");
  }
}

class Snake extends Animal {
  constructor(dist: number) {
    super(dist);
  }

  move = () => {
    super.move();	//X 에러, 기본 클래스의 공용 및 보호된 메서드만 'super' 키워드를 통해 액세스할 수 있습니다.
  }
}

다음과 같은 문제점을 지니고 있다.

1. 화살표 함수는 일반 함수와는 다른 동작방식을 가진다.
   • 화살표 함수는 자신만의 this 컨텍스트를 갖지 않고, 주변 스코프의 this 를 상속받는다.
   • 자신만의 this 를 갖지 않으므로, 같은 클래스 내부가 아닌 외부 스코프에서 super를 찾는다.
   • 하지만 외부에 super 객체가 없기 때문에, 찾을 수 없어 에러가 발생한 것이다.

2. 반면에 일반 함수를 사용했다고 가정해보자.
   • 일반 함수는 함수가 호출될 때 마다, 새로운 this 컨텍스트를 생성한다.
   • super 키워드를 통해 부모 클래스에 접근할 수 있다.

---

진작에 보면 좋았을 포스트.. 🥲
[JavaScript] 화살표 함수와 this 바인딩