class

AI
gemma-4-31b
작성자
익명
작성일
2026.07.31
조회수
6
버전
v2
기술 → 프로그래밍 → JavaScript
JavaScript ES6 객체 지향 프로그래밍 클래스 상속 프로토타입 Web Components 중급

📋 문서 버전

이 문서는 2개의 버전이 있습니다. 현재 최신 버전을 보고 있습니다.

class

JavaScript에서 class는 객체 지향 프로그래밍(OOP, Object-Orient Programming)을 보 직관적이고 구조적으로 구현할 수 있도록 도와주는 문법적 구조입니다. ECMAScript 205(ES6) 도입된 class 키워드는 기존의 프로토타입 기반 상속을 더 명확하고 익숙한 형태로 표현할 수 있게 해줍니다. 이 문서에서는 JavaScript의 class 문법, 사용 방법, 상속, 정적 메서드, 그리고 주의사항 등을 상세히 설명합니다.

개요

JavaScript는 원래 프로토타입 기반 언어로, 클래스 기반 언어(C++, Java 등)와는 달리 클래스 개념이 존재하지 않았습니다. 하지만 개발자들이 객체 지향 패턴을 흉내 내기 위해 함수와 프로토타입을 활용하는 방식이 널리 사용되었습니다. ES6에서 도입된 class는 이러한 패턴을 더 명확하고 유지보수하기 쉽게 만들어주는 문법적 설탕(syntactic sugar)입니다. 실제로는 여전히 프로토타입 기반의 메커니즘을 사용하지만, 클래스 문법을 통해 코드의 가독성과 구조를 향상시킵니다.

class 문법 기본 구조

JavaScript의 class는 다음과 같은 기본 구조를 가집니다:

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

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

  • class 키워드로 클래스를 정의합니다.
  • constructor() 메서드는 인스턴스 생성 시 호출되는 특수 메서드입니다.
  • 일반 메서드는 클래스 내부에 직접 정의할 수 있으며, 내부에서 this를 통해 인스턴스의 속성에 접근합니다.

인스턴스 생성

const person1 = new Person("홍길동", 30);
person1.greet(); // "안녕, 나는 홍길동입니다."

new 키워드를 사용해 클래스의 인스턴스를 생성할 수 있습니다. 이때 constructor가 자동으로 실행됩니다.

상속과 extends

JavaScript의 class는 extends 키워드를 통해 상속(inheritance)을 지원합니다. 자식 클래스는 부모 클래스의 속성과 메서드를 물려받으며, 필요 시 오버라이드할 수 있습니다.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 부모 클래스의 constructor 호출
    this.grade = grade;
  }

  study() {
    console.log(`${this.name}은(는) 공부하고 있습니다.`);
  }

  // 메서드 오버라이드
  greet() {
    console.log(`안녕, 나는 학생 ${this.name}입니다.`);
  }
}

  • extends 키워드로 부모 클래스를 지정합니다.
  • super()를 통해 부모 클래스의 생성자를 호출합니다.
  • 메서드를 자식 클래스에서 재정의(오버라이드)할 수 있습니다.

예제 실행

const student1 = new Student("김철수", 16, "10학년");
student1.greet(); // "안녕, 나는 학생 김철수입니다."
student1.study(); // "김철수은(는) 공부하고 있습니다."

정적 메서드 (Static Methods)

정적 메서드는 클래스의 인스턴스가 아닌, 클래스 자체에서 호출되는 메서드입니다. static 키워드를 사용하여 정의합니다.

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

  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathUtils.add(5, 3));       // 8
console.log(MathUtils.multiply(4, 7));  // 28

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

getter와 setter

클래스 내부에서 get과 set 키워드를 사용해 속성에 대한 접근과 설정을 제어할 수 있습니다.

class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get radius() {
    return this._radius;
  }

  set radius(value) {
    if (value < 0) {
      throw new Error("반지름은 음수일 수 없습니다.");
    }
    this._radius = value;
  }

  get area() {
    return Math.PI * this._radius ** 2;
  }
}


const circle = new Circle(5);
console.log(circle.area); // 78.5398...

circle.radius = 10;
console.log(circle.area); // 314.159...

circle.radius = -1; // Error: 반지름은 음수일 수 없습니다.

getter와 setter는 데이터의 유효성 검사나 계산된 속성 제공에 유용합니다.

주의사항 및 제한 사항

  • class는 호이스팅되지 않음: class는 let과 const처럼 TDZ(Temporal Dead Zone)에 영향을 받습니다. 클래스 정의 이전에 참조하면 에러가 발생합니다.
  • strict mode 기본 적용: 클래스 내부는 자동으로 엄격 모드(strict mode)에서 실행됩니다.
  • 메서드는 열거 불가: 클래스 내 메서드는 기본적으로 enumerable: false 속성을 가지므로 for...in 루프로 열거되지 않습니다.
  • 클래스 표현식도 가능: class는 선언뿐만 아니라 표현식 형태로도 사용할 수 있습니다.

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

관련 개념 및 참고 자료

결론

JavaScript의 class는 객체 지향 프로그래밍을 보다 명확하고 직관적으로 구현할 수 있게 해주는 중요한 문법입니다. 비록 내부적으로는 여전히 프로토타입 기반의 메커니즘을 사용하지만, 개발자 경험을 크게 향상시키며, 대규모 애플리케이션의 코드 구조화에 큰 도움을 줍니다. 상속, 정적 메서드, getter/setter 등의 기능을 적절히 활용하면 유지보수성과 재사용성이 높은 코드를 작성할 수 있습니다.

컴포넌트 기반 개발로의 확장

JavaScript의 class는 단순한 문법적 설탕을 넘어, 현대 웹 개발의 핵심인 컴포넌트 기반 개발(Component-Based Development)의 기초가 되었습니다. UI의 각 요소를 독립적인 클래스로 정의함으로써 상태(State)와 로직을 캡슐화하고, 이를 재사용 가능한 단위로 관리하는 패턴이 React, Vue와 같은 프레임워크의 초기 설계에 큰 영향을 주었습니다.

DOM 및 Document 관점에서의 클래스 활용

웹 개발에서 '클래스'라는 용어는 CSS 클래스와 JavaScript의 class 문법 두 가지 의미로 사용됩니다. 이 둘은 서로 다른 개념이지만, UI 컴포넌트를 구현할 때 상호 보완적으로 사용됩니다.

classList API vs class 문법 비교

구분 element.classList (DOM API) class (JS 문법)
성격 HTML 요소의 CSS 클래스 목록을 제어하는 인터페이스 객체를 생성하기 위한 설계도(청사진)
목적 스타일 변경, UI 상태(활성/비활성) 시각적 제어 데이터 구조화, 로직 캡슐화, 상속 구현
주요 메서드 add(), remove(), toggle(), contains() constructor(), extends, super()
대상 DOM 요소 (HTMLElement) JavaScript 객체 (Instance)

Custom Element 구현 예제

Web Components 표준을 사용하면 JavaScript 클래스를 통해 브라우저에 새로운 HTML 태그를 정의할 수 있습니다.

class MyUserCard extends HTMLElement {
  constructor() {
    super(); // HTMLElement 상속 시 필수 호출
    this.attachShadow({ mode: 'open' }); // Shadow DOM 생성
  }

  // 요소가 DOM에 추가될 때 호출
  connectedCallback() {
    const name = this.getAttribute('name') || 'Unknown';
    this.shadowRoot.innerHTML = `
      <style>
        .card { border: 1px solid #ccc; padding: 10px; border-radius: 8px; width: 200px; }
        .name { font-weight: bold; color: blue; }
      </style>
      <div class="card">
        <p>사용자: <span class="name">${name}</span></p>
      </div>
    `;
  }
}

// 브라우저에 <user-card> 태그 등록
customElements.define('user-card', MyUserCard);
사용법: HTML에서 <user-card name="홍길동"></user-card>와 같이 사용합니다.

문서 구조화와 클래스 기반 설계

복잡한 웹 페이지를 설계할 때, DOM의 직접적인 조작보다는 문서의 특정 섹션을 클래스로 모델링하여 상태 관리와 렌더링 로직을 분리하는 것이 유지보수에 유리합니다.

상태 관리와 렌더링 분리 구조

graph LR
    A[State: 데이터/상태] --> B{Class Logic: 상태 변경 및 가공}
    B --> C[Render Method: DOM 업데이트]
    C --> D[DOM: 실제 화면 반영]
    D --> E[User Event: 클릭/입력]
    E --> B

이 설계 패턴을 적용하면, 데이터가 변경되었을 때 render() 메서드만 다시 호출함으로써 UI를 일관되게 업데이트할 수 있습니다.

class TodoList {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.todos = []; // 상태(State)
  }

  addTodo(text) {
    this.todos.push({ text, completed: false });
    this.render(); // 상태 변경 후 렌더링 호출
  }

  render() {
    // 렌더링 로직: 상태를 기반으로 DOM을 생성
    this.container.innerHTML = `
      <ul>
        ${this.todos.map(t => `<li>${t.text}</li>`).join('')}
      </ul>
    `;
  }
}

Web Components 및 DOM API 참고 자료

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

이 AI 생성 콘텐츠가 도움이 되었나요?