2025 / 03 / 06
오늘 수업 시간에는 class에 대해 배웠습니다. static과 getter & setter까지 배워보니까 자바를 배웠을 때가 떠올랐습니다. 그 당시에도 이 부분은 많이 헷갈려하기도 하고 어려워하기도 했어서 이번 기회에 벨로그를 작성하며 정리를 해보도록 하겠습니다.
💌 Class
- 타입스크립트에서 클래스는 객체 지향 프로그래밍의 중요한 개념 중 하나입니다.
- 클래스는 프로퍼티와 메서드로 구성되며, 객체를 생성할 때 중요한 역할을 합니다.
- 객체를 만들기 위한 설계도 역할을 합니다.
1. 기본 개념
클래스
- 객체를 생성하기 위한 설계도입니다.
- 클래스는 객체의 속성(프로퍼티)과 행위(메서드)를 정의합니다.
프로퍼티
- 객체가 가진 속성으로, 데이터나 정보를 저장하는 변수입니다.
메서드
- 객체가 수행할 수 있는 행위나 기능을 정의하는 함수입니다.
2. 클래스 정의
- 타입스크립트에서는 class 키워드를 사용하여 클래스를 정의합니다.
class SampleClass { // 클래스 정의 }
3. 객체 생성
- new 키워드를 사용하여 객체를 생성합니다.
const sample = new SampleClass(); // 객체 생성
4. 프로퍼티와 메서드
- 클래스 내부에 속성과 기능을 정의할 수 있습니다.
class Human { // 프로퍼티 정의 name: string = "이한"; age: number = 22; height: number = 180; // 메서드 정의 sayHello(): void { console.log("안녕, 이한이에요!"); } } const user = new Human(); // Human 객체 생성 console.log(user.name); // "이한" 출력 user.sayHello(); // "안녕, 이한이에요!" 출력
5. 생성자 함수
constructor 함수
- 객체가 생성될 때 초기값을 설정하는 함수입니다.
- 객체를 만들 때 필요한 값들을 생성자를 통해 전달하고, 프로퍼티에 할당할 수 있습니다.
class Human2 { name: string; age: number; height: number; // 생성자 함수 constructor(name: string, age: number, height: number) { this.name = name; this.age = age; this.height = height; } } const leehan = new Human2("이한", 22, 180); const iu = new Human2("아이유", 31, 165); console.log(leehan.name); // "이한" console.log(iu.name); // "아이유"
- 생성자는 객체가 생성될 때마다 자동으로 호출되며, new 키워드 뒤에 괄호 안에 값을 전달해줍니다.
- 이 값들은 constructor 함수의 매개변수로 들어가게 됩니다.
6. 메서드 정의
- 클래스 내부에서 메서드를 정의하여 객체가 특정 동작을 하게 할 수 있습니다.
class MaleIdol { member: number; company: string; groupname: string; // 메서드 정의 hello(): void { console.log(`안녕하세요! ${this.groupname}입니다!!`); } // 생성자 함수 constructor(member: number, company: string, groupname: string) { this.member = member; this.company = company; this.groupname = groupname; } } const boynextdoor = new MaleIdol(6, "Koze", "boynextdoor"); boynextdoor.hello(); // "안녕하세요! boynextdoor입니다!!"
- hello() 메서드는 MaleIdol 클래스에 속한 메서드입니다.
- 이 메서드는 객체가 호출할 때마다 콘솔에 특정 메시지를 출력합니다.
💌 실습 예제(1)
Car 클래스를 만들고, 다음 속성을 추가하시오.
- brand (문자열): 자동차 브랜드
- speed (숫자, 기본값 0): 현재 속도
- 생성자에서 brand 값을 받아서 초기화
- accelerate(amount: number): amount 만큼 속도를 증가하는 메서드 추가
- brake(amount: number): amount 만큼 속도를 줄이는 메서드 추가
// Car 클래스 정의
class Car {
// 브랜드 속성: 차의 브랜드를 저장
brand: string;
// 속도 속성: 기본값은 0으로 설정
speed: number = 0;
// 생성자: 객체가 생성될 때 호출되어 브랜드 값을 초기화
constructor(brand: string) {
// 주어진 브랜드 값으로 초기화
this.brand = brand;
}
// 가속 메서드: 현재 속도에 주어진 양만큼 속도를 증가
accelerate(amount: number) {
// 주어진 양(amount)을 더해서 속도 증가
this.speed += amount;
}
// 브레이크 메서드: 현재 속도에서 주어진 양만큼 속도를 감소
brake(amount: number) {
// 주어진 양(amount)을 빼서 속도 감소
this.speed -= amount;
}
}
// 실행 결과 확인
const car = new Car("Hyundai");
console.log(car.brand); // "Hyundai"
car.accelerate(20);
console.log(car.speed); // 20
car.brake(10);
console.log(car.speed); // 10💌 static
- 인스턴스가 아닌 클래스 자체에 귀속되는 프로퍼티와 메서드를 만들 때 사용합니다.
- static으로 선언된 변수나 함수는 클래스를 통해 접근할 수 있으며, 인스턴스를 생성하지 않아도 호출이 가능합니다. (new 키워드 없이 호출이 가능)
1. 사용 예시
- static을 사용한 간단한 예시입니다.
class Human3 { // static으로 선언된 프로퍼티 static idol_name: string = "이한"; // 클래스로부터 직접 접근 가능 age: number; height: number; // 생성자: 인스턴스 생성 시 필요한 값 초기화 constructor(age: number, height: number) { this.age = age; this.height = height; } } // 인스턴스를 생성하지 않고, 클래스명으로 static 프로퍼티에 접근 console.log(Human3.idol_name); // "이한"
static 프로퍼티
- idol_name은 static으로 선언되어, Human3 클래스 자체에 속합니다.
- 객체를 만들지 않고 Human3.idol_name처럼 클래스 이름으로 직접 접근할 수 있습니다.
인스턴스 프로퍼티
- age와 height는 객체마다 다른 값을 가질 수 있는 일반적인 프로퍼티입니다.
- 클래스의 인스턴스를 생성하고 값을 할당해야 접근할 수 있습니다.
2. static 메서드
- 클래스 인스턴스가 아니라 클래스 자체에서 호출할 수 있는 메서드입니다.
- 인스턴스를 만들지 않고도 호출할 수 있습니다.
- 클래스 자체의 동작이나 전역적인 작업을 할 때 유용합니다.
class Car { static brand: string = "Tesla"; // static으로 선언된 브랜드 static getBrand(): string { return Car.brand; // 클래스의 static 프로퍼티를 반환 } } console.log(Car.getBrand()); // "Tesla"
- getBrand( ) 메서드는 static으로 선언되어 Car 클래스에서 직접 호출할 수 있습니다.
- 인스턴스를 만들지 않아도, Car.getBrand( )와 같이 클래스명으로 바로 호출할 수 있습니다.
💌 팩토리 함수
Factory Constructor
- 객체를 생성하는 메서드입니다.
- 생성자 함수 대신 특정 조건에 맞는 객체를 반환하는 방식입니다.
- 객체 생성 로직을 캡슐화하고, 객체를 더 유연하게 생성할 수 있습니다.
class User { name: string; age: number; // 생성자: 인스턴스를 생성할 때 기본 정보를 설정 constructor(name: string, age: number) { this.name = name; this.age = age; } // static 팩토리 함수: 객체를 생성하는 함수 static create(name: string, age: number): User { return new User(name, age); } } // 팩토리 함수를 통해 객체 생성 const user = User.create("해원", 23); console.log(user.name); // "해원" console.log(user.age); // 23
팩토리 함수(create)
- User.create( )와 같이 클래스의 static 메서드를 사용하여 객체를 생성합니다.
- 객체를 생성하는 방식을 캡슐화할 수 있기 때문에, 복잡한 로직을 숨길 수 있습니다.
장점
- 인스턴스를 생성하는 과정에서 추가적인 로직을 넣을 수 있는 장점이 있습니다.
- 유효성 검사나 객체 생성 전에 다른 작업을 할 때 유용합니다.
💌 getter & setter
getter
- 클래스 내부에 있는 private & protected 속성 값을 외부에서 읽을 수 있게 해주는 메서드입니다.
- 데이터를 가공하여 반환할 때도 사용합니다.
- 특정 형식으로 데이터를 반환하거나 계산된 값을 제공할 수 있습니다.
setter
- 클래스 내부의 private 속성 값을 외부에서 수정할 수 있게 해주는 메서드입니다.
- 외부에서 값을 입력받아 클래스 내부의 값을 안전하게 수정할 수 있도록 합니다.
1. 사용 예시
- getter & setter 코드 예시입니다.
class Human { // name은 private 속성으로 외부에서 직접 접근할 수 없어요. private name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } // name과 age를 합쳐서 반환하는 getter get nameAndAge(): string { return `${this.name}의 나이는 ${this.age}입니다.`; } // name을 외부에서 수정할 수 있도록 하는 setter set setName(name: string) { this.name = name; } } const Iu = new Human("아이유", 30); // name 속성은 외부에서 직접 접근할 수 없습니다. // Iu.name = "민지"; // 오류! private 속성은 외부에서 직접 수정 불가능 // setName setter를 사용해 name을 수정할 수 있어요. Iu.setName = "이지은"; console.log(Iu.nameAndAge); // "이지은의 나이는 30입니다."
Private 속성
- 해당 변수는 클래스 내부에서만 접근할 수 있고, 외부에서는 접근이 불가능합니다.
- 위의 예시에서는 name 속성이 private로 선언되어 있기 때문에 Iu.name = "민지"와 같이 외부에서 값을 직접 수정할 수 없습니다.
Getter
- get nameAndAge( )는 읽기 전용 속성을 제공합니다.
- name과 age를 가공하여, "이한의 나이는 22입니다." 같은 형식으로 반환합니다.
- nameAndAge는 메서드처럼 보이지만 실제로는 속성처럼 사용할 수 있습니다.
- Iu.nameAndAge처럼 접근할 수 있습니다.
Setter
- set setName(name: string)는 name 값을 수정하는 기능을 제공합니다.
- Iu.setName = "이지은";을 사용하면 name을 외부에서 수정할 수 있게 됩니다.
- set 메서드는 값을 설정하는 메서드입니다.
- setName은 속성처럼 사용하지만 실제로는 메서드입니다.
2. 사용 이유
1. 캡슐화
- 클래스 외부에서 속성에 직접 접근하는 것을 막고, 객체의 상태를 제어할 수 있습니다.
2. 데이터 보호
- private 속성을 사용하여 외부에서 잘못된 값으로 객체 상태가 변경되는 것을 방지할 수 있습니다.
3. 값의 유효성 검사
- setter에서 값을 설정하기 전에 유효성 검사나 변환을 추가할 수 있습니다.
💌 실습 예제(2)
배운 내용을 활용해 실습 예제를 풀어보았습니다.
class MaleIdol {
member: number; // 아이돌 그룹의 멤버 수
company: string; // 아이돌 그룹이 소속된 회사
private groupname: string; // 그룹 이름 (private: 외부에서 직접 접근 불가)
static My_favorite: string = "이한"; // static 변수로 클래스 이름을 통해 접근 가능
// 메서드: 그룹 인사를 출력하는 함수
hello(): void {
console.log(
`Who’s there? ${this.groupname}! 안녕하세요, ${this.groupname}입니다!`
);
}
// 생성자: 클래스 인스턴스를 생성할 때 초기화하는 메서드
constructor(member: number, company: string, groupname: string) {
this.member = member;
this.company = company;
this.groupname = groupname;
}
// getter: groupname과 member 정보를 합쳐서 반환
get nameAndMember(): string {
return `${this.groupname}는 ${this.member}명 입니다.`;
}
// setter: groupname을 외부에서 수정할 때 사용
set setName(groupname: string) {
this.groupname = groupname;
}
}
// 인스턴스 생성
const boynextdoor = new MaleIdol(6, "Koze", "BOYNEXTDOOR");
// 그룹 인사를 출력
boynextdoor.hello();
// setter를 통해 그룹명을 수정
boynextdoor.setName = "보이넥스트도어";
// getter를 통해 그룹명과 멤버 수 출력
console.log(boynextdoor.nameAndMember);
// static 변수는 클래스 이름을 통해 접근
console.log("favorite member : " + MaleIdol.My_favorite);41일차 후기
- class와 static에 대해 배웠는데, 딱 여기까지만 괜찮은 것 같습니다.
- 복습하면서 이해한 내용이 맞는 건지.. 아직 헷갈리는 부분이 많은 것 같습니다.
- 팩토리 함수가 어떻게 보면 new 키워드를 사용해 객체를 생성하는 과정을 줄여주고 객체 만드는 방식을 컴포넌트화 한다고 생각하면 조금 이해하기 쉬운 것 같습니다.
- getter & setter의 개념은 헷갈리지 않을 정도로는 이해했는데.. 실습 예제에서 바로 응용하려고 하니까 조금 어려웠습니다. 점점 더 어려워져서 걱정입니다 ㅠㅠ
- 사용할 때는 get과 set으로 써야하는데 왜 자꾸 getter / setter 이렇게 쓰게되는 걸까요..
- 이제는 객체와 인스턴스를 구분하고 사용할 수 있습니다. ˞♡ฅ(ᐤ꒳ᐤฅ) ‹3
૮꒰ ྀི〃´꒳`〃꒱ა