[Typescript] OOP-객체지향 프로그래밍

JUNHO YEOM·2022년 11월 11일
0

TypeScript

목록 보기
4/4
post-thumbnail

OOP 객체지향 프로그래밍

OOP란 기본적으로 코드를 정리하는 방법을 말한다. 데이터에 대한 생각, 구조, 방식이라고 할 수 있다.

OOP를 통해 데이터만 넣으면 그 내용을 적용하여 같은 속성을 가진 객체를 아웃풋으로 만들어 줄 수 있다.

Class는 객체를 위한 공장과 같다.

  • 일종의 구조, 설계도 역할을 한다
  • 같은 속성을 가지고 있지만, 데이터는 다른 경우

클래스 생성하기

class Player {
  constructor(name, health, skill) {
    this.name = name;
    this.health = health;
    this.skill = skill;
    this.xp = 0;
  }
}

먼저 Player라는 클래스를 생성해 주었다.
constructor라는 메서드를 갖고,
Human 클래스는 name, health, skill, xp 라는 속성을 갖는다.

constructor

클래스 내에 있는 함수는 메서드(Method)라고 부른다.
그리고 constructor메서드는 클래스에서 새 객체를 만들때 자동으로 호출된다.
constructor 메서드에서 클래스를 어떻게 구성할지 정할 수 있다.
메서드는 클래스를 더 높은 레벨로 진화시킨다.

this.

this.는 클래스 내의 속성을 지칭하는 방법을 말한다.

Class로 객체 만들기

const bill = new Player("Bill Gates", 85, "Programmer");
const elon = new Player("Elon Musk", 90, "Human");
const warren = new Player("Warren Buffett", 100, "Investor");

우리가 이미 Human class를 만들었기 때문에 다음과 같은 객체들을 쉽게 만들 수 있다.

클래스의 메서드

class Player {
  constructor(name, health, skill) {
    this.name = name;
    this.health = health;
    this.skill = skill;
    this.xp = 0;
  }
  sayHello() {
    return `Hi, my name is${this.name}`;
  }
}

클래스는 constructor 뿐만이 아니라 다음과 같이 수많은 메서드를 가질 수 있다.
Human 클래스에 sayHello() 메서드를 정의하였다.

클래스를 통해 만든 객체의 메서드 사용하기

const bill = new Player("Bill Gates", 85, "Programmer");
print(bill.sayHello())

Human 클래스에 sayHello() 메서드를 정의하였기 때문에, Player 클래스 내에서 생성된 모든 객체가 sayHello 메서드를 호출할 수 있다.

지금까지 클래스를 생성하였고, 이는 객체를 만드는 공장처럼 쉽게 객체를 만들 수 있게 해준다.
하지만, 특성이 조금씩 다른 클래스가 필요하다면 어떻게 해야 할까?
다시 새로운 클래스를 만들어 줘야 할까?


Inheritance(상속성) 적용하기

코드의 중복을 줄이고 코드를 재사용 가능한 조각으로 만드는 것을 말한다.
상속을 사용하여 자식 클래스가 부모 클래스의 속성을 갖게 된다.

class Human {
  constructor(name) {
    this.name = name;
    this.arms = 2;
    this.legs = 2;
  }
}
class Baby {
  constructor(name) {
  this.name = name;
  this.arms = 2;
  this.legs = 2;
  this.cute = true;
  }
  cry() {
    return `waa waa`
  }
}
class Teenager {
  constructor(name) {
  this.name = name;
  this.arms = 2;
  this.legs = 2;
  this.emotional = true;
  }
  study() {
    return `noooo`
  }
}

위의 3개의 클래스는 같은 일부가 같은 속성을 가지고 있지만,
this.cute, this.emotional과 같은 다른 속성을 가지고 있고,
포함하는 메서드가 다르다.
그래서 위와 같이 3개의 클래스를 만들어 주었다.
하지만 이것이 효율적이라는 생각이 들지는 않는다.
코드의 중복을 최소화 하며 해결해보자.


상속하여 확장하기

class Human {
  constructor(name) {
    this.name = name;
    this.arms = 2;
    this.legs = 2;
  }
}
class Baby extends Human{
  constructor(name) {
    this.cute = true;
  }
  cry() {
    return `waa waa`;
  }
}
class Teenager extends Human{
  constructor(name) {
    this.emotional = true;
  }
  study() {
    return `noooo`;
  }
}

다음 Baby class와 Teenager class는
extends를 통해서 Human class에서 확장(extends)되었다.
하지만 이 코드도 완벽하지 않다.
자식 클래스에서 constructor에는 name이 있는데
속성에는 해당 값이 없다.
name 속성은 부모 클래스에서 물려 받은 것이기 때문에 부모 클래스의 속성을 가져와 줘야 한다.
자식클래스에서 부모클래스의 속성을 호출하려면 super mothod를 호출해야 한다.


super 메서드 사용하기

class Human {
  constructor(name) {
    this.name = name;
    this.arms = 2;
    this.legs = 2;
  }
}

부모 클래스인 Human 클래스는 다음과 같은 형태를 갖는다.

class Baby extends Human{
  constructor(name) {
    super(name)
    this.cute = true;
  }
  cry() {
    return `waa waa`;
  }
}
class Teenager extends Human{
  constructor(name) {
    super(name)
    this.emotional = true;
  }
  study() {
    return `noooo`;
  }
}

이렇게 Human 속성을 갖는 Baby 클래스와 Teenager 클래스를 만들어 보았다.

생성된 객체 확인하기

const myBaby = new Baby('아람이')
console.log(myBaby)

// 출력된 결과
Baby {
  name: '아람이',
  arms: 2,
  legs: 2,
  cute: true,
  __proto__: { constructor: ƒ Baby(), cry: ƒ cry() }
}

console.log(my.cry())
// 출력된 결과
'waa waa'

다음과 같이 Baby 클래스를 통해서 새로운 객체를 만든 경우
Human의 속성인 name, arms, legs를 모두 갖고,
Baby 클래스의 속성인 cute와 cry() 메서드를 모두 갖는 것을 알 수 있다.


OOP의 4가지 특징

Encapsulation(캡슐화)

데이터, 데이터를 활용하는 함수를 캡슐이나 컨테이너 안에 가두는 것을 의미한다.
노출할 자료와 변경될 수 있는 자료, 혹은 숨기고 싶은 자료를 선택할 수 있다.
OOP에서 캡슐은 Class를 의미한다.

const enterprener = {
  firstName: "Elon",
  lastName: "Musk",
  shares: 100,
  company: "TESLA"
}

function calculateNetWorth(shares, company) {
  const sharePrice = getSharePrice(company);
  return shares * sharePrice;
}

예시로 다음과 같은 데이터와 함수가 있다고 하자.
Class를 통해 다음과 같이 캡슐화 할 수 있다.

class Enterpreneur {
constructor(
	private firstName: string,
    private lastName: string, 
    private shares: number,
    private company: string
    ) {}
    public calculateNetWorth() {
      return this.shares * getSharePrice(this.company);
    }
    public getName() {
      return `${this.firstName} ${this.lastName}`;
    }
}
// 클래스 정의하기

const elon = new Enterpreneur("Elon", "Musk", 100, "TESLA");
// 클래스를 통해 객체 생성하기

console.log(elon.calculateNetWorth());
// 클래스의 메서드를 사용하여 원하는 값 구하기

private

캡슐화는 어떻게 클래스 정보에 접근 혹은 수정하는지를 결정하는 권한을 제공한다.
이중 Private은 해당 클래스 외부의 사용자는 해당 필드에 액세스 하거나 수정할 수 없다.
따라서 다음과 같은 객체의 값을 수정하거나 조회하는 코드는 동작하지 않는다.

elon.company = "AMAZON"
elon.firstName

elon 객체의 값을 조회하기 위해서는 해당 클래스의 public getName() 메서드를 이용하여 조회할 수 있다.


Inheritance(상속)

상속을 통해서 코드를 더 작은 딘위 혹은 Class로 쪼갤 수 있고, 재사용할 수 있다.
클래스를 확장하면 자식클래스는 부모 클래스의 모든 속성과 메소드를 상속받게 된다.
상속에 대한 내용은 Human 클래스를 사용한 예시를 살펴보자.

상속은 분할 및 정복을 가능하게 된다.
클래스를 작게 쪼개고 분할한 후에 레고처럼 클래스를 원하는대로 조립할 수 있다.


Absctract(추상화)

구현 세부정보를 숨기는 일반 인터페이스를 지정하는 행위

추상화와 인터페이스 예시

차량을 운전할때 우리는 차량을 운전하기 위한 인터페이스를 사용한다.
휠, 페달, 에어컨 버튼등이 인터페이스에 해당한다.
우리는 차량 회사들에게 의해서 노출된 인터페이스들을 활용하여 차량을 운전할 수 있다.
우리는 페달을 밟았을 때 차량이 어떻게 동작하는지 등의 세부사항은 알 필요 없이
주어진 인터페이스만으로 운전할 수 있다.

class BetterArray {
  private items: string[];
  constructor() {
    this.items = [];
  }
  public getItems() {
    return [...this.items];
  }
  public addItem(item: string) {
    this.items.push(item);
  }
  public removeItem(itemToDelete: string) {
    this.items = this.items.filter((item) => item !== itemToDelete);
  }
  public modifyItem(itemToChange: string, newValue: string) {
    const index = this.items.indexOf(itemToChange);
    if( index !== -1) {
      this.items[index] = newValue;
    }
  }
} 

BetterArray라는 Class를 만들고,
public으로 의도적으로 BetterArray를 조작할 수 있도록 인터페이스를 만든다.

BetterArray 사용해보기

const arr = new BetterArray();
arr.addItem("I love");
// BetterArray: { "items": [ "I love" ] }
arr.addItem("Javascript");
// BetterArray: { "items": [ "I love", "Javascript" ] } 
arr.modifyItem("Javascript", "TypeScript");
// BetterArray: { "items": [ "I love", "TypeScript" ] } 

클래스를 사용하여 만든 arr은 다음과 같은 기능을 수행한다.

인터페이스의 장점

이렇게 만든 BetterArray의 클래스 구조를 더욱 효율적으로 바꾼다고 가정하자.
BetterArray클래스의 내부 구조를 바꾸면 수정된 메서드를 사용하는 사용자는
바뀐 메서드 때문에 추가로 무엇을 해야할 필요가 없다.
내부 구조만 바뀌었고, 노출된 인터페이스는 그대로이기 때문에 쉽게 사용할 수 있는 것이다.


Polymorphism(다형성)

다향한 형태를 갖는것을 말한다.
다음의 예시를 살펴보자.

Class Person {
  public sayHi() {
    return "Bonjour"
  }
}

class Korean extends Person {
  public sayHi() {
    return "안녕!";
  }
}

class American extends Person {
  public sayHi() {
    return "Hi!";
  }
}

Korean과 American 클래스는 Person 클래스에서 확장되었다.
두개의 클래스 모두 sayHi()라는 메서드를 사용하고 있는데 return 값은 각각 다른것을 알 수 있다.
sayHi()메서드를 실행했을 때, Korean은 "안녕!", American은 "Hi!"를 반환한다.
위와 같은 방식을 method overriding(메서드 오버라이딩)이라고 한다.
sayHi라는 메서드 이름은 동일하지만 구현 방식은 안녕과 Hi로 서로 다른 것을 의미한다.

method overriding

메서드 오버라이딩은 다른 "안녕!"과 "Hi!"처럼 서로 다른 반환값을 가질 수 있지만,
Person 클래스에서 오버라이딩 된 것이기 때문에
Person 클래스의 sayHi() 메서드가 "Bonjour"라는 문자열을 반환한 것처럼
오버라이딩한 Korean 클래스의 sayHi() 메서드 또한 문자열을 반환해야 한다.
따라서 Korean 클래스의 sayHi() 메서드는 3과 같은(number) 다른 속성의 반환값을 가질 수는 없다.

이러한 특성을 갖기 때문에 클래스의 핵심은 그대로 있고, 구현방식의 모양과 모습은 달라질 수 있다.
(Korean과 American이 각기 다른 언어로 "안녕"과 "Hi"를 말하지만, 각기 다른 언어로 인사한다는 것을 알 수 있다.)


Reference

해당 문서는 노마드 코더의 객체지향 프로그래밍 관련 영상을 참고하였습니다.

https://www.youtube.com/watch?v=cg1xvFy1JQQ
https://www.youtube.com/watch?v=IeLWSKq0xIQ

0개의 댓글