1. Class란?
Class는 '객체를 찍어내는 틀'이다! 마치 붕어빵 틀로 붕어빵을 만드는 것처럼, Class로 동일한 형태의 객체들을 만들 수 있다.
JavaScript에서 Class는 ES6(ECMAScript 2015)에서 새롭게 도입된 문법이다. 이전에는 함수와 프로토타입을 사용해야 했지만, Class 문법이 도입되면서 더 직관적이고 깔끔하게 객체 지향 프로그래밍을 할 수 있게 되었다!
2. Class 기본 문법
2.1 Class 선언
가장 기본적인 Class 선언 방법은 다음과 같다:
// 클래스 선언
class Person {
// constructor: 객체를 생성할 때 실행되는 특별한 메서드이다
constructor(name, age) {
this.name = name; // this는 생성될 객체를 가리킨다
this.age = age;
}
// 메서드 선언
sayHello() {
console.log(`안녕하세요, 저는 ${this.name}입니다.`);
}
}
// 객체 생성
const person1 = new Person('김코딩', 25);
const person2 = new Person('박해커', 23);2.2 Class의 주요 구성 요소
-
constructor (생성자):
- 객체를 생성할 때 자동으로 호출되는 특별한 메서드이다
- 객체의 초기값을 설정할 때 사용한다
- 클래스당 하나만 가질 수 있다
-
프로퍼티 (속성):
- 객체의 데이터를 저장하는 변수이다
this.name,this.age와 같이 사용한다
-
메서드:
- 클래스 내에서 정의한 함수이다
- 객체가 사용할 수 있는 기능이다
3. 다양한 예제로 알아보는 Class
3.1 게임 캐릭터 만들기
class Character {
constructor(name, level = 1) {
this.name = name;
this.level = level;
this.hp = 100;
}
levelUp() {
this.level++;
this.hp += 10;
console.log(`${this.name}이(가) ${this.level}레벨이 되었습니다!`);
}
attack() {
console.log(`${this.name}이(가) 공격합니다!`);
}
}
const warrior = new Character('전사');
warrior.levelUp(); // 전사이(가) 2레벨이 되었습니다!3.2 상속 이해하기
// 부모 클래스이다
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(`${this.name}이(가) 먹이를 먹습니다.`);
}
}
// 자식 클래스이다
class Dog extends Animal {
bark() {
console.log(`${this.name}: 멍멍!`);
}
}
// 사용 예시이다
const puppy = new Dog('뽀삐');
puppy.eat(); // 뽀삐이(가) 먹이를 먹습니다.
puppy.bark(); // 뽀삐: 멍멍!4. 관련해서 궁금했던 점들!
Q1: Class와 Object는 어떻게 다른가?
- Class: 객체를 만들기 위한 템플릿(설계도)이다
- Object: Class를 통해 실제로 만들어진 실체(인스턴스)이다
- 예시: 붕어빵 틀(Class)과 실제 붕어빵(Object)의 관계이다.
Q2: 상속은 왜 사용하는가?
- 코드 재사용성을 높일 수 있다
- 중복 코드를 줄일 수 있다
- 유지보수가 쉬워진다
- 계층적인 구조 설계가 가능하다
Q3: constructor는 어떤 역할을 하는가?
- 객체가 생성될 때 초기값을 설정한다
- 필수 데이터를 검증한다
- 객체 생성 시 필요한 초기 작업을 수행한다
5. 실제 활용 예제
5.1 투두리스트 아이템 만들기
class TodoItem {
constructor(title) {
this.title = title;
this.completed = false;
this.createdAt = new Date();
}
toggle() {
this.completed = !this.completed;
console.log(
`할 일 "${this.title}"이(가) ${
this.completed ? '완료' : '미완료'
} 상태로 변경되었습니다.`
);
}
}
const homework = new TodoItem('자바스크립트 공부하기');
homework.toggle(); // 할 일 "자바스크립트 공부하기"이(가) 완료 상태로 변경되었습니다.6. 알아두면 좋은 점
-
new 키워드 사용하기
const person = Person('김코딩', 25); // ❌ 작동하지 않는다 const person = new Person('김코딩', 25); // ✅ 올바른 방법이다 -
선언 순서 지키기
const person = new Person(); // ❌ 아직 Person이 정의되지 않았다 class Person {} // 클래스는 사용하기 전에 먼저 선언해야 한다
7. 정리
Class는 현대 JavaScript에서 핵심적인 개념이다. 객체 지향 프로그래밍의 기반이 되며, React나 Vue 같은 프레임워크의 컴포넌트 아키텍처에서도 중요한 역할을 한다. Class의 기본 원리와 패턴을 깊이 이해하면 프레임워크 활용과 대규모 애플리케이션 설계에 큰 도움이 된다.
