Section2

Section2 2일차 (객체지향)

Heemok 2023. 5. 11. 14:25

2023-05-11(목)

 

Section 2 Unit2 - [JavaScript] 객체 지향 프로그래밍


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

= 데이터와 기능을 한 곳에 묶어서 처리하는 프로그래밍 방식

= 속성과 메서드가 하나의 "객체"라는 개념에 포함되어, object와는 다르게 class라는 이름으로 부릅니다.

 

클래스와 인스턴스란?

= 설계를 하기 위해 필요한 설계도를 클래스 라고 말하며, 그 설계도를 바탕으로 만들어진 자동차들을

인스턴스 객체, 줄여서 인스턴스라고 부른다.

 

인스턴스를 만드는 방법은 new 키워드를 사용하여 만듭니다. 그리고 일반적인 다른 함수와 구분하기

위하여 보틍 대문자로 시작하며 일반명사로 만듭니다.

 

ex)

function Car(brandnamecolor) {
  // 인스턴스가 만들어질 때 실행되는 코드
}

class Car {
  constructor(brandnamecolor) {
    // 인스턴스가 만들어질 때 실행되는 코드드
  }
}

function 으로 이루어진 함수는 ES5 방법으로 만들어진 방식이고

class 로 이루어진 함수는 ES6 방법으로 만들어진 방식이다, 요즘에는 ES6방식을 많이 사용한다.

 

constructor(생성자)함수라고 인스턴스가 만들어질 때 실행되는 코드입니다.

let avante = new Car('hyundai''avante''black');
let mini = new Car('bmw''mini''white');
let beetles = new Car('volkswagen''beetles''red');

코드를 보시다시피 인스턴스를 만들때는 new 키워드를 사용하여 만들고, 즉시 생성자 함수가 실행되며,

변수에 클래스의 설계를 가진 객체, 즉 인스턴스가 할당됩니다.

 

각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게됩니다.


속성과 메소드는 그 인스턴스의 특징들인데

예를들어 학생의 속성은 학생이름,반이름,현재 성적등이 있을 수 있고

메서드는 객체에 딸린 함수인데 숙제 진행, 수업 진행, 야간 자율 학습 진행 등이 있을 수 있습니다.

 

 

function Car(brandname , color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
}

class Car {
  constructor(brandnamecolor) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

새롭게 this 라는 키워드가 나오는데 객체지향 프로그래밍에서는 자주 나오니 알아둡시다.

 

this는 한마디로 인스턴스 객체를 의미합니다. parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값

위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 브랜드, 이름, 색상을 넣겠다는 의미입니다.

 

function Car(brandname , color) {
  
  Car.prototype.refuel = function() {
    // 연료 공급을 구현하는 코드
  }
  Car.prototype.drive = function() {
    // 운전을 하는 코드
  }
}

class Car {
  constructor(brandnamecolor) {
    
    refuel() {
          // 연료 공급을 구현하는 코드
    }
    drive() {
      // 운전을 하는 코드
    }
  }
}

메소드 정의 입니다. ES5방식에서 prototype는 사용한다는 것만 기억해두고 다음에 자세히 공부합시다.

 

- 실습 -

 

function Car(brand, name , color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
}
  Car.prototype.drive = function() {
    console.log(this.name + '가 운전을 시작합니다.');
  }


let avante = new Car('Hyundai' , 'Avante' , 'Black');
avante.color;
avante.drive();

Avante가 운전을 시작합니다.

 


OOP는 프로그램 설계 철학입니다.

OOP의 모든 것은 "객체"로 그룹화 됩니다.

OOP의 4가지 주요개념을 통해 재사용성을 얻을 수 있습니다.

 

객체지향 프로그래밍(OOP Basic Concepts)의 주요 개념 4가지

  • 캡슐화
  • 추상화
  • 상속
  • 다형성

캡슐화 (Encapsulation)

  • 데이터와 기능을 하나의 단위로 묶는 것
  • 은닉(hiding) : 구현은 숨기고, 동작은 노출시킴
  • 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음

캡슐화는 외부에서 앞서 말했던 데이터(속성)와 기능(메서드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것입니다. 데이터(속성)와 기능(메서드)들이 느슨하게 결합되는 것이죠.

 

느슨한 결합은 = 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과

닮게 코드를 모아 결합하는 것을 의미합니다.

 

은닉화 = 내부 데이터나 내부 구현이 외부로 노출되지 않도록 하는 것.

 

 

추상화 (Abstraction)

= 추상화는 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념입니다.

EX) 전화라는 객체가 있다면, 그 안에 스피커, 마이크, 서킷 보드 등 여러개의 내부구현이 되어 있을것입니다.

 

그러나 우리가 실제로 사용할때는, 이러한 내부적인 부분은 생각하지않고, 단순히 버튼을 누르고 전화를 거는 방식으로

해결하는 것으로 인터페이스를 단순화할 수 있습니다.

 

추상화와 캡슐화는 종종 헷갈려 하는 개념중 하나입니다.

 

추상화는 클래스를 사용하는 사람이 필요하지 않는 메서드나 코드등을 노출시키지 않고, 단순한 이름으로 정의하는 것

캡슐화는 코드나 데이터의 은닉을 목표로 포커스가 맞춰져 있습니다.

 

즉 클래스 정의 시, 메소드의 속성만 정의한 것을 인터페이스라고 하고 이것이 추상화의 본질입니다.

 

 

 

상속 (Inheritance)

= 상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것입니다.

부모/자식 으로도 이야기 하지만, 기본 클래스의 특징을 파생 클래스가 상속받는다로 표현하는 것이 적합합니다.

 

EX) 예를들어 사람과 학생이 있다고 하면, 사람에게 이름,나이, 성별의 속성 자다,먹다 등의 메서드가 있다면

학생에게는 어떤것이 있을까요?

 

마찬가지로 사람과 같은 이름 , 나이, 성별의 속성 / 자다 먹다 등의 메서드가 있어야 할것입니다.

이럴때 사람이란 클래스를 학생이 상속받아 사용하는 것입니다.

 

 

다형성 (Polymorphism)

= 다양한 형태를 가질 수 있다.

 

"말하다" 라는 동작의 본질은 "입으로 소리를 내다" 를 의미합니다. 그러나, 사람마다, 각기 동물마다 제각각의 소리를 내는 것 처럼, 객체 역시 똑같은 메소드라 하더라도, 다른 방식으로 구현될 수 있습니다.

 

만일 언어 자체에서 다형성을 제공하지 않는다면, 기본(부모) 클래스에 종류별로 분기를 시켜서 하나하나 다르게 만들어야 할 것입니다. 또는 각각의 자식 클래스에 별도의 각기 다른 render 함수를 만들 수도 있겠지만, 엘리먼트라는 클래스의 본질상 "화면에 뿌린다"(render)는 개념은 부모가 갖고 있는 것이 합리적입니다.

 

 

 

이 4가지 OOP의 주요 개념의 장점은

= 캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높입니다.

 

= 추상화는 마찬가지로 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화합니다.

 

= 상속 역시 불필요한 코드를 줄여 재사용성을 높입니다.

 

= 다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신

객체의 특성에 맞게 달리 작성하는 것이 가능해집니다.

'Section2' 카테고리의 다른 글

Section 2 Unit7 [HTTP/네트워크]  (0) 2023.05.24
Section 2 Unit 6 React State - Props  (0) 2023.05.22
Unit4-[React] intro 웹 프론트앤드  (0) 2023.05.18
Section2 3일차 (프로토타입)  (1) 2023.05.11
Section2 1일차  (1) 2023.05.10