OOP(객체 지향 프로그래밍)이란? with typescript

OOP(객체 지향 프로그래밍)이란?

필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 컴퓨터 프로그래밍 패러다임 중 하나입니다.

객체 지향 프로그래밍은 응집력이 높고 결합력이 낮다는 특징이 있습니다.

 

응집력이 높다?
프로그램의 한 요소가 특정 목적을 위해 밀접하게 연관된 기능들이 모여서 구현 되어 있고,
지나치게 많은 일을 하지 않으면 그것을 응집력이 높다고 표현한다.

결합력이 낮다?
- 다른 요소들과 관계를 크게 맺고 있지 않고 덜 의존적이라는 것을 의미한다.

 

 

아래에서는 객체지향프로그래밍의 특성 중 가장 대표적인 추상화, 캡슐화, 상속성, 다형성에 대한 개념을 typescript 예시 코드와 함께 다뤄보았습니다 :)

 

 

 

추상화

- 객체지향 관점에서 클래스(상태와 행위를 가진 객체)를 정의하는 것

   여기서 상태는 필드, 행위는 메서드라고 생각하시면 이해하기 편합니다.

 

정리하자면 공통의 속성이나 기능을 묶어 이름을 붙이는 것!

특징

• 불필요한 부분(구현부)을 숨긴다.
  - 추상화된 클래스를 사용만하는 입장에서는 어떤 동작을 하는지만 파악이 되면 구현부에 대한 구체적인 이해없이 사용하는데 지장이 없음
• 인터페이스(기능명세)와 구현을 분리한다.

아래는 구현부 없이 인터페이스만 정의하여 추상화한 코드입니다.

interface PersonInterface {
	age: string
	name: string

	updatePassword(): Promise<string>
	getAge(): number
	setAge(age: number): void
	getName(): string
	setName(name: string): void
}

 

 

 

 

캡슐화 - 데이터 보호

• 데이터 캡슐화 : 필드와 메서드를 하나(객체)로 묶는 것 입니다.
• 은닉화 : 객체의 세부 내용이 외부에 드러나지 않아 외부에서 데이터를 직접 접근하는 것을 방지한다.
• 외부에 영향 없이 객체 내부 구현 변경 가능 - Person의 setAge기능이 바뀐다면 해당 메서드에서의 수정만을 통해 변경의 전파를 최소화할 수 있습니다!

 

class Person {
    private age: number;
    private name: string;

    public getAge(): number {
        return this.age;
    }
    public setAge(age: number): void{
        this.age = age;
    }
    public getName(): string {
        return this.name;
    }
    public setName(name: string): void {
        this.name = name;
    }
}

Person 이라는 클래스에 이름, 나이의 멤버변수(상태값)

이 클래스의 이름, 나이는 접근 제한자가 private 이기 때문에 인스턴스에서 직접 접근해 수정할 수 없으며 선언된 get , set 메서드로만 수정이 가능합니다.

 

 

 

 

상속

• 자식클래스가 부모클래스의 특징과 기능을 물려받았기 때문에 중복 코드를 줄일 수 있다.
• 클래스에 메소드 추가가 어려운 경우에 사용합니다.
  • 다른사람이 작성한 클래스를 가져와 사용하는 경우 (해당 객체에 대한 이해가 완벽하지 않은 경우)
  • 클래스가 다양한 곳에서 상속 받아 쓰이는 경우 (파악하지 못한 곳에서는 추가한 메서드가 불필요한 기능일 수 있음)

 

class Animal {
  private name: string;

  public setName(name: string): void {
    this.name = name;
  }
  public getName(): string {
    return this.name;
  }
  public cry(): void {
    console.log('울음소리!');
  }
}

class Cat extends Animal {
  cry(): void {
    console.log('야옹야옹');
  }
}

const cat = new Cat();
cat.setName('나비');
console.log(cat.getName()); // 나비 - 부모 클래스에서 물려받음 setName, getName메서드가 정상적으로 동작함을 보장

cat.cry(); // 야옹야옹 - 재정의한 울음소리가 콘솔로그에 출력됩니다!

Cat 클래스는 Animal 인터페이스를 상속받았습니다.

상속시에 모든 필드, 메서드를 물려 받았기 때문에 setName, getName메서드가 정상적으로 작동합니다.

이를 통해 중복코드를 줄이고 수정하고 싶은 cry 메서드만 오버라이딩(재정의)하여 Cat 클래스를 정의했음을 볼 수 있습니다.

 

다형성 - 객체 변경 용이

<다형성을 가능하게 하는 것들>

 

오버라이딩(overriding) : 부모클래스 메서드를 자식클래스에서 재정의하는 것

class Animal {
  public cry(): void {
    console.log('울음소리!');
  }
}

class Cat extends Animal {
  cry(): void {
    console.log('야옹야옹');
  }
}

const animal = new Animal();
animal.cry(); //부모 클래스의 cry() 메소드입니다.

const cat = new Cat();
cat.cry(); //자식 클래스의 cry() 메소드입니다.

 

 

오버로딩(overloading) : 한 클래스에서 메소드 이름은 같지만 파라미터 개수나 자료형을 다르게 하여 서로 다르게 동작하게 하는 것

• method의 이름은 같지만 매개변수의 개수는 동일하게 type은 다르게 정의하여 사용하는 방법입니다
• 다른 언어의 Overloading 개념은 method명만 같으면 되지만 typescript는 Overloading을 사용하기 위해서는 함수명과 매개변수의 개수가 같아야 합니다.

class Example {
  // 함수의 선언
  shot(input: number): void;
  shot(input: number[]): void;

  // 함수의 구현
  // 유니온 타입으로 선언 & 타입 가드
  shot(input: number | number[]): void {
    if (typeof input === 'number') console.log(`input : number type`);
    else console.log('input : number[] type');
  }
}

const example = new Example();
example.shot(3);
example.shot([1, 2, 3]);

 

 

이번 포스팅에서는 사이드프로젝트에 OOP를 적용하기전의 준비과정으로 OOP를 적용하기 위해 필수적인 개념들을 typescript 코드와 함께 간단하게 알아보았습니다.

오버로딩 관련 문법은 저도 많이 사용하지 않아 어색한 문법이라 의미가 있는 포스팅이었습니다.
이를 계기로 typescript도 따로 시간을 내서 한번 다룰 필요성을 느낄 수 있었습니다 :)

오늘 포스팅은 이만 마무리 하겠습니다~!


참조 : 
https://lakelouise.tistory.com/194

https://doitnow-man.tistory.com/entry/typescript-11-%EC%98%A4%EB%B2%84%EB%9D%BC%EC%9D%B4%EB%94%A9%EA%B3%BC-%EC%98%A4%EB%B2%84%EB%A1%9C%EB%94%A9-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%B6%94%EC%83%81-class

https://velog.io/@0sunset0/OOP%EC%9D%98-%EB%84%A4%EA%B0%80%EC%A7%80-%ED%8A%B9%EC%A7%95%EC%B6%94%EC%83%81%ED%99%94%EC%BA%A1%EC%8A%90%ED%99%94%EC%83%81%EC%86%8D%EB%8B%A4%ED%98%95%EC%84%B1

https://simsimjae.tistory.com/293