1. 객체지향 프로그래밍 (OOP)
- 각각의 객체는 속성과 행동을 갖고, 그 속성과 행동이 갖는 내용과 특징을 따라서 독립적인 객체가 되지만 크게는 같은 범주에도 속함
- 온라인 쇼핑몰 앱을 구축하기 위해서는 주문 정보, 고객 데이터, 장바구니에 물건 담기, 주문 결제처리, 고객 정보 업데이트 등 수많은 데이터를 다룰 변수와 함수가 필요
- 프로젝트 규모가 커지게 되면 프로그램을 작동시키기 위해서 수많은 코드가 쓰이게 되는데 흩어져 있으면 가독성이 떨어지는 유지보수가 힘든 프로그램이 됨
- 객체지향 프로그래밍은 이러한 문제를 해결하기 위해서 연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍 스타일
- 객체 : 연관된 변수와 함수들의 집합
- 어플리케이션을 실제 세상에 존재하는 객체와 같은 단위로 쪼개고 객체들이 서로 상호 작용함으로써 시스템이 동작
2. 클래스 (Class)
let fullName: string;
let jobTitle: string;
let printEmployeeDetails = (fullName: string, jobTitle: string): void => {
console.log(`${fullName}의 직업은 ${jobTitle}`);
};class Employee {
fullName: string;
jobTitle: string;
printEmployeeDetails = (): void => {
console.log(`${this.fullName}의 직업은 ${this.jobTitle}`);
};
}- 객체들은 클래스를 통해서 만들어 질 수 있음
- 클래스는 객체를 정의하는 객체의 뼈대, 설계도, 생산틀
- class 키워드 뒤에 대문자로 시작하는 클래스 이름, 중괄호
- class 내에서는 let이나 const 같은 키워드 필요없음
- 클래스 내의 함수는 매개변수가 필요 없음, 클래스 내에서 정의된 변수들은 this 키워드를 통해 바로 접근 가능
- 클래스 내에서 정의된 함수들은 클래스 내에서 정의된 변수들에게 접근 가능
- 클래스 내에서 정의된 함수들은 상대적으로 적은 매개변수를 가지는 장점 있음
- 매개변수가 적을 수록 쉽게 함수를 사용할 수 있고, 쉬운 유지보수가 가능
- 프로퍼티 (Property) : 클래스 내에 정의된 변수
- 메소드 (Method) : 클래스 내에 정의된 함수
3. 클래스와 객체 (Object)의 연관성
class Employee {
fullName: string;
jobTitle: string;
printEmployeeDetails = (): void => {
console.log(`${this.fullName}의 직업은 ${this.jobTitle}`);
};
}
let employee1 = new Employee();
employee1.fullName = '민수';
employee1.jobTitle = '프론트엔드 개발자';
employee1.printEmployeeDetails(); // 민수의 직업은 프론트엔드 개발자- OOP에서 클래스는 객체를 만들어 내기 위한 설계도, 생산틀
- 클래스로 객체를 생성 === 클래스의 새로운 인스턴스를 생성
- new 연산자 뒤에 클래스의 이름과 괄호
- 클래스를 바탕으로 객체가 생성, 코드에디터에서 객체의 이름 뒤에 점을 찍으면 클래스 내의 메소드가 나타남
- 클래스로 객체를 생성하면 클래스를 뼈대로 삼아 만들어진 객체이기 때문에 클래스 내에 선언된 프로퍼티와 메소드를 객체 자신의 프로퍼티와 메소드로 갖게 됨
- 클래스를 통해서 여러가지 독립된 객체를 만들 수 있음
4. static 프로퍼티와 추상 class
class Car {
name: string = 'car';
color: string;
static wheels = 4;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.name);
console.log(Car.wheels);
console.log(this.wheels); // 에러 발생
}
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
showName() {
console.log(super.name);
}
}
const z4 = new Bmw('black');
console.log(Car.wheels);
console.log(z4.wheels); // 에러 발생- 정적 멤버 변수를 만들 수 있음
- static으로 선언된 정적 멤버 변수나 메서드는 this가 아니라 class명으로 접근
abstract class Car {
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
}
}
const car = new Car('red'); // 에러 발생
class Bmw extends Car {
constructor(color: string) {
super(color);
}
}
const z4 = new Bmw('black');- abstract 키워드를 사용하여 추상 클래스를 만듦
- 추상 클래스는 new를 사용하여 객체를 만들 수 없음
- 오직 상속을 이용해서 객체를 만들 수 있음
abstract class Car {
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
}
abstract doSomething(): void;
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
doSomething() {
alert(3);
}
}
const z4 = new Bmw('black');- 추상 클래스 내부의 추상 메서드는 반드시 상속받은 쪽에서 구체적인 구현을 해주어야 함
- 추상화 : 프로퍼티나 메서드에 이름만 선언해주고, 구체적인 기능은 상속받은 쪽에서 구현해주는 것
- 추상 클래스를 상속받아 만든 수많은 객체들이 동일하게 메서드를 갖고 있어도 구체적인 기능은 가지각색일 수 있음
FrontEnd Developer