# ES6 클래스 문법

ECMAScript 2015 (ES6)는 자바스크립트의 주요 개정판으로, 객체 지향 프로그래밍(OOP) 스타일을 보다 직관적이고 명확하게 구현할 수 있도록 **클래스(class)** 문법을 도입했습니다. 기존의 프로토타입 기반 상속 방식은 기능적으로 동일하지만, 코드의 가독성과 유지보수성이 떨어지는 단점이 있었습니다. ES6 클래스 문법은 이러한 문제를 해결하기 위해 **구문적 설탕**(syntactic sugar) 형태로 제공되며, 개발자들이 더 익숙한 클래스 기반 문법을 사용할 수 있게 해줍니다.

이 문서에서는 ES6의 클래스 문법의 기본 구조, 주요 기능, 상속, 정적 메서드, 그리고 사용 시 주의사항 등을 체계적으로 설명합니다.

---

## 개요

ES6 클래스는 자바스크립트의 프로토타입 기반 객체지향 프로그래밍을 보다 명확하게 표현하기 위한 새로운 문법입니다. 클래스는 생성자 함수(Constructor)와 프로토타입 메서드를 하나의 블록 안에서 정의할 수 있게 하며, 상속을 위한 `extends` 키워드와 `super` 호출을 지원하여 객체지향 설계를 보다 직관적으로 구현할 수 있습니다.

중요한 점은, 자바스크립트의 클래스는 **완전히 새로운 객체 모델을 도입한 것이 아니라**, 기존의 프로토타입 기반 시스템을 감싼 구문적 편의 기능이라는 점입니다. 따라서 클래스를 사용하더라도 내부적으로는 여전히 프로토타입 체인이 작동합니다.

---

## 클래스 기본 문법

클래스는 `class` 키워드를 사용하여 정의합니다. 가장 간단한 형태는 다음과 같습니다:

```javascript
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`안녕, 나는 ${this.name}입니다.`);
  }
}
```

- `constructor` 메서드는 인스턴스 생성 시 자동으로 호출되는 특수 메서드입니다.
- `greet()`는 프로토타입에 추가되는 일반 메서드입니다.

### 인스턴스 생성

```javascript
const person1 = new Person("김철수", 25);
person1.greet(); // "안녕, 나는 김철수입니다."
```

`new` 키워드를 사용하여 클래스의 인스턴스를 생성합니다.

---

## 메서드 유형

클래스 내부에는 여러 유형의 메서드를 정의할 수 있습니다.

### 1. 인스턴스 메서드

인스턴스를 통해 호출되는 일반 메서드입니다. 위 예제의 `greet()`가 이에 해당합니다.

### 2. 정적 메서드 (Static Methods)

정적 메서드는 클래스 자체에서 호출되며, 인스턴스를 생성하지 않아도 사용할 수 있습니다. `static` 키워드로 정의합니다.

```javascript
class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(3, 5)); // 8
```

정적 메서드는 유틸리티 함수나 팩토리 메서드를 구현할 때 유용합니다.

### 3. 게터와 세터 (Getters and Setters)

클래스 내부에서 속성에 접근하거나 값을 설정할 때 특별한 로직을 수행하고자 할 때 사용합니다.

```javascript
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  get area() {
    return this.width * this.height;
  }

  set area(value) {
    console.warn("직접 면적을 설정할 수 없습니다.");
  }
}

const rect = new Rectangle(4, 5);
console.log(rect.area); // 20
```

---

## 클래스 상속

ES6 클래스는 `extends` 키워드를 사용하여 다른 클래스를 상속할 수 있습니다. 이를 통해 코드의 재사용성과 계층적 구조를 쉽게 구현할 수 있습니다.

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 부모 클래스의 생성자 호출
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name}이(가) 멍멍 짓습니다.`);
  }

  fetch() {
    console.log(`${this.name}이(가) 공을 가져옵니다.`);
  }
}

const dog = new Dog("바둑이", "진도");
dog.speak(); // "바둑이이(가) 멍멍 짓습니다."
dog.fetch(); // "바둑이이(가) 공을 가져옵니다."
```

- `super()`는 부모 클래스의 생성자를 호출합니다.
- 메서드 오버라이딩: 자식 클래스에서 부모 클래스의 메서드를 재정의할 수 있습니다.

---

## 클래스 표현식

클래스는 선언문(class declaration) 외에도 표현식(class expression) 형태로 정의할 수 있습니다. 이는 익명 또는 명명된 함수처럼 사용 가능하며, 조건부로 클래스를 정의하거나 즉시 실행하는 데 유용합니다.

```javascript
const RectangleClass = class {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
};
```

---

## 주의사항 및 제한

- **클래스는 호이스팅되지 않습니다.** 클래스는 `let`과 `const`처럼 TDZ(Temporal Dead Zone)에 영향을 받습니다.
- **클래스 내부는 항상 strict mode로 실행됩니다.**
- **클래스는 호출(call)이 아닌 인스턴스화(new)를 통해 사용해야 합니다.**
- **클래스는 `new.target`을 통해 인스턴스 생성 여부를 확인할 수 있습니다.**

---

## 참고 자료 및 관련 문서

- [MDN Web Docs: Classes](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)
- [ECMAScript 2015 Language Specification](https://262.ecma-international.org/6.0/#sec-class-definitions)
- 관련 문서: [프로토타입 기반 상속](/wiki/JavaScript/프로토타입_상속), [ES6 모듈 시스템](/wiki/JavaScript/ES6_모듈)

---

ES6 클래스 문법은 자바스크립트 개발자가 객체 지향적인 설계를 보다 자연스럽게 구현할 수 있도록 해주는 강력한 도구입니다. 문법적으로는 다른 언어의 클래스와 유사하지만, 내부 동작 원리를 이해함으로써 더 효과적이고 안정적인 코드를 작성할 수 있습니다.