[JavaScript] 기초 : Class란 무엇인가?

자바스크립트에서 클래스를 설명할 때, 우리가 친숙한 개념을 이용해보자. 예를 들어, "자동차 공장"을 비유로 들어 설명할 수 있다.

 

클래스(Class)란 무엇인가?

클래스는 일종의 "청사진" 또는 "설계도"라고 생각하면 된다. 이 설계도를 통해 같은 유형의 물건을 여러 개 만들 수 있다. 예를 들어, 자동차 공장에서 여러 대의 자동차를 만드는 것처럼 말이다.

 

클래스의 구조

자동차를 만드는 과정을 생각해보자. 자동차를 만들기 위해 몇 가지 중요한 부분들을 정의해야 한다.

• 생성자(Constructor): 자동차를 만들 때 초기 설정을 하는 부분이다. 예를 들어, 자동차의 색깔, 모델명 등을 처음 설정하는 단계이다.
• 속성(Properties): 자동차의 특징이다. 색깔, 모델명, 속도 등이 이에 해당한다.
• 메서드(Methods): 자동차가 할 수 있는 행동이다. 예를 들어, 자동차가 달리거나 멈추는 기능이 이에 해당한다.

이제 자바스크립트 코드를 이용해 자동차 클래스를 만들어보자.

class Car {
  // 생성자: 자동차의 초기 설정을 한다
  constructor(color, model) {
    this.color = color; // 자동차의 색깔
    this.model = model; // 자동차의 모델명
    this.speed = 0;     // 자동차의 초기 속도는 0
  }

  // 메서드: 자동차가 달리는 기능
  drive() {
    this.speed = 60; // 자동차의 속도를 60으로 설정
    console.log(`${this.model}이(가) 달리고 있습니다!`);
  }

  // 메서드: 자동차가 멈추는 기능
  stop() {
    this.speed = 0; // 자동차의 속도를 0으로 설정
    console.log(`${this.model}이(가) 멈췄습니다.`);
  }
}​

 

클래스 사용하기

이제 이 클래스를 이용해 여러 대의 자동차를 만들 수 있다. 아래 코드를 보자.

// 자동차 공장에서 새로운 자동차를 만든다
const myCar = new Car('빨강', '소나타');
const yourCar = new Car('파랑', '아반떼');

// 자동차를 사용해보자
myCar.drive();  // 출력: 소나타가 달리고 있습니다!
yourCar.drive();  // 출력: 아반떼가 달리고 있습니다!

myCar.stop();   // 출력: 소나타가 멈췄습니다.
yourCar.stop(); // 출력: 아반떼가 멈췄습니다.

 

정리

• 클래스는 같은 유형의 여러 물건을 만들기 위한 설계도이다.
• 생성자는 물건을 처음 만들 때 초기 설정을 담당한다.
• 속성은 물건의 특징을 나타내고, 메서드는 물건이 할 수 있는 행동을 나타낸다.

이렇게 클래스는 자동차 공장처럼 특정한 물건을 만들고, 그 물건이 어떤 특징을 가지며, 어떤 행동을 할 수 있는지를 정의하는데 아주 유용하다. 이 비유를 통해 자바스크립트 클래스 개념이 좀 더 쉽게 다가왔으면 좋겠다.

 

상속(inheritance)

자바스크립트 클래스에는 상속(inheritance)이라는 중요한 개념이 있다. 예를 들어, 스포츠카(SportsCar)라는 클래스를 만들고 싶다면, 기존의 자동차(Car) 클래스를 확장하여 만들 수 있다. 이를 통해 코드의 재사용성을 높이고, 더욱 구조화된 프로그래밍이 가능하다.

class SportsCar extends Car {
  turboBoost() {
    this.speed += 50;
    console.log(`${this.model}이(가) 터보 부스트를 사용하여 속도가 ${this.speed}로 증가했습니다!`);
  }
}

const mySportsCar = new SportsCar('노랑', '포르쉐');
mySportsCar.drive();
mySportsCar.turboBoost();
mySportsCar.stop();

 

이 코드는 새로운 스포츠카 클래스를 만들어 자동차의 기본 기능을 유지하면서도, 추가적인 기능(터보 부스트)을 더할 수 있게 한다. 상속을 통해 클래스 간의 관계를 정의하고, 더 복잡한 애플리케이션을 쉽게 관리할 수 있다.

이러한 개념들을 통해 자바스크립트 클래스에 대한 이해가 더욱 깊어지기를 바란다.