16. 자바스크립트 클래스

다이나둘 2025. 2. 27. 18:16

2025. 2. 27. 18:16

자바스크립트 클래스

열다섯 번째 포스팅까지 다양한 주제를 다루었다면, 이번에는 "문법 및 핵심 개념" 범주에 속하는 "클래스"에 대해 작성해보려 한다. 클래스(Class)는 ES6에서 도입된 객체 지향 프로그래밍 문법으로, 객체 생성과 상속을 체계적으로 관리한다.

클래스는 자바스크립트에서 객체 기반 코드를 구조화하며, 기존 프로토타입 기반 상속을 간소화한다. 이번 포스팅에서는 클래스의 개념, 선언 및 사용, 메서드와 속성, 상속, 그리고 실습 예제를 작성해볼 예정이다.

클래스는 자바스크립트의 객체 지향 프로그래밍을 이해하는 데 필수적이다. 콘솔 또는 HTML 파일에서 예제를 실행하며 클래스의 동작을 체감할 수 있다.

클래스의 개념

클래스는 객체를 생성하기 위한 템플릿이다. 자바스크립트에서 클래스는 ES6 이전의 프로토타입 기반 객체 생성을 더 직관적인 문법으로 대체한다. 클래스는 속성(프로퍼티)과 메서드를 정의하며, 이를 기반으로 인스턴스를 생성한다.

다음은 기본적인 클래스 예제이다:

class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`안녕, ${this.name}입니다.`);
    }
}
const person = new Person('홍길동');
person.sayHello(); // "안녕, 홍길동입니다."

위 예제는 클래스를 정의하고 인스턴스를 생성한다.

클래스는 객체 지향 프로그래밍의 캡슐화와 상속을 지원한다. 이는 코드의 재사용성과 가독성을 강화한다.

클래스 선언과 사용

클래스는 class 키워드로 선언한다.

1. 클래스 선언

기본 구조는 다음과 같다:

class Car {
    constructor(brand) {
        this.brand = brand;
    }
    drive() {
        console.log(`${this.brand}가 운전됩니다.`);
    }
}
const myCar = new Car('현대');
myCar.drive(); // "현대가 운전됩니다."

2. 생성자

constructor는 인스턴스 초기화를 담당한다:

class Book {
    constructor(title, author) {
        this.title = title;
        this.author = author;
    }
    getInfo() {
        return `${this.title} - ${this.author}`;
    }
}
const book = new Book('자바스크립트', '김유신');
console.log(book.getInfo()); // "자바스크립트 - 김유신"

예제: 클래스 기본 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 기본</title>
</head>
<body>
    <button id="btn">정보 표시</button>
    <div id="result"></div>
    <script>
        class User {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            showInfo() {
                return `${this.name}, ${this.age}세`;
            }
        }
        const user = new User('홍길동', 30);
        const btn = document.getElementById('btn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            result.textContent = user.showInfo();
        });
    </script>
</body>
</html>

이 예제는 클래스 인스턴스의 정보를 표시한다.

메서드와 속성

클래스는 메서드와 속성을 정의한다.

1. 인스턴스 메서드

인스턴스에 속한다:

class Counter {
    constructor() {
        this.count = 0;
    }
    increment() {
        this.count++;
        return this.count;
    }
}
const counter = new Counter();
console.log(counter.increment()); // 1

2. 정적 메서드

static으로 클래스 자체에 속한다:

class MathUtil {
    static add(a, b) {
        return a + b;
    }
}
console.log(MathUtil.add(5, 3)); // 8

예제: 메서드 활용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>메서드 활용</title>
</head>
<body>
    <button id="incBtn">증가</button>
    <button id="addBtn">더하기</button>
    <div id="result">0</div>
    <script>
        class Calculator {
            constructor() {
                this.value = 0;
            }
            increment() {
                this.value++;
                return this.value;
            }
            static add(a, b) {
                return a + b;
            }
        }
        const calc = new Calculator();
        const incBtn = document.getElementById('incBtn');
        const addBtn = document.getElementById('addBtn');
        const result = document.getElementById('result');

        incBtn.addEventListener('click', () => {
            result.textContent = calc.increment();
        });

        addBtn.addEventListener('click', () => {
            result.textContent = Calculator.add(parseInt(result.textContent), 10);
        });
    </script>
</body>
</html>

이 예제는 인스턴스와 정적 메서드를 결합한다.

클래스 상속

클래스는 extends로 상속한다.

1. 기본 상속

부모 클래스를 확장한다:

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name}가 소리를 냅니다.`);
    }
}
class Dog extends Animal {
    bark() {
        console.log(`${this.name}가 짖습니다.`);
    }
}
const dog = new Dog('멍멍이');
dog.speak(); // "멍멍이가 소리를 냅니다."
dog.bark(); // "멍멍이가 짖습니다."

2. super 호출

super로 부모 생성자를 호출한다:

class Cat extends Animal {
    constructor(name, color) {
        super(name);
        this.color = color;
    }
    describe() {
        console.log(`${this.name}는 ${this.color}색입니다.`);
    }
}
const cat = new Cat('야옹이', '검정');
cat.describe(); // "야옹이는 검정색입니다."

예제: 상속 활용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 상속</title>
</head>
<body>
    <button id="speakBtn">소리</button>
    <button id="barkBtn">짖기</button>
    <div id="result"></div>
    <script>
        class Animal {
            constructor(name) {
                this.name = name;
            }
            speak() {
                return `${this.name}가 소리를 냅니다.`;
            }
        }
        class Dog extends Animal {
            bark() {
                return `${this.name}가 짖습니다.`;
            }
        }
        const dog = new Dog('멍멍이');
        const speakBtn = document.getElementById('speakBtn');
        const barkBtn = document.getElementById('barkBtn');
        const result = document.getElementById('result');

        speakBtn.addEventListener('click', () => {
            result.textContent = dog.speak();
        });

        barkBtn.addEventListener('click', () => {
            result.textContent = dog.bark();
        });
    </script>
</body>
</html>

이 예제는 상속을 활용한다.

실습 예제: 클래스 관리

클래스를 활용한 관리 예제이다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 관리</title>
    <style>
        #itemList {
            list-style-type: none;
            padding: 0;
        }
        #itemList li {
            padding: 5px;
            background: #f0f0f0;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <input type="text" id="input" placeholder="항목 입력">
    <button id="addBtn">추가</button>
    <ul id="itemList"></ul>
    <script>
        class ItemManager {
            constructor() {
                this.items = [];
            }
            addItem(item) {
                this.items.push(item);
                this.render();
            }
            render() {
                const list = document.getElementById('itemList');
                list.innerHTML = '';
                this.items.forEach((item, index) => {
                    const li = document.createElement('li');
                    li.textContent = `${index + 1}. ${item}`;
                    list.appendChild(li);
                });
            }
        }
        const manager = new ItemManager();
        const input = document.getElementById('input');
        const addBtn = document.getElementById('addBtn');

        addBtn.addEventListener('click', () => {
            if (input.value) {
                manager.addItem(input.value);
                input.value = '';
            }
        });
    </script>
</body>
</html>

이 예제는 클래스로 항목을 관리한다.

실무에서의 클래스

실무에서는 데이터 모델에 활용한다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>데이터 모델</title>
</head>
<body>
    <button id="fetchBtn">데이터 가져오기</button>
    <div id="result"></div>
    <script>
        class DataFetcher {
            constructor(url) {
                this.url = url;
            }
            async fetchData() {
                const response = await fetch(this.url);
                const data = await response.json();
                return data;
            }
            display(data) {
                result.textContent = JSON.stringify(data, null, 2);
            }
        }
        const fetcher = new DataFetcher('https://jsonplaceholder.typicode.com/users/1');
        const fetchBtn = document.getElementById('fetchBtn');
        const result = document.getElementById('result');

        fetchBtn.addEventListener('click', async () => {
            const data = await fetcher.fetchData();
            fetcher.display(data);
        });
    </script>
</body>
</html>

이 예제는 클래스로 데이터를 관리한다.

주의할 점

클래스는 프로토타입 기반이다. 상속 시 super 호출을 잊지 않는다. 정적 메서드는 인스턴스에서 호출 불가하다.

결론

클래스의 선언, 상속을 학습하며 실습 예제를 통해 알아보았다. 다음 포스팅에서는 모듈에 대해 작성해볼 예정이다.

저작자표시 (새창열림)

'코딩 공부 > 자바스크립트' 카테고리의 다른 글

18. 자바스크립트 템플릿 리터럴 (0)	2025.02.28
17. 자바스크립트 모듈 (0)	2025.02.28
15. 자바스크립트 this 바인딩 (0)	2025.02.27
14. 자바스크립트 클로저 (0)	2025.02.27
13. 자바스크립트 스코프 (0)	2025.02.27

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

다이나둘 일기장