🍎 절차적 지향 프로그래밍
- 초기의 프로그래밍 언어는 단순하게 함수같이 절차를 따라 이동하는것이 전부였다.
🍎 객체 지향 프로그래밍 (OOP)
- 그러나 객체지향 프로그래밍은 변수와 함수로 순차적으로 작동하는 것을 넘어서
- 데이터의 접근, 처리 과정에대한 모형을 만들어 내는 방식을 고안해냈다.
- 데이터와 동작기능을 한 번에 묶여서 처리할 수 있게 되었다.
예를들어서,
원의 반지름이라는 속성이 있다.
속성을 가지고 원의 지름, 둘레,넓이를 구할 수 있다.
이때 반지름은 상태를 나타내는 데이터(프로퍼티)
원의 지름, 둘레, 넓이를 구하는 것은 동작(메서드)이다.
- 이처럼 객체 지향 프로그래밍은 객체의 상태를 나타내는 데이터(프로퍼티)+상태 데이터를 조작할 수 있는 동작(메서드)
을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다.
🍎 클래스와 인스턴스
- 클래스 : 속성이 들어가지 않은 청사진
➡️ 세부사항을 넣으면? 객체가된다
➡️ 세부사항 어떻게 넣나요? 생성자를 통해 넣어줍니다. 마치 함수에 인자를 넣듯이요!
- 인스턴스 : 클래스를 통해 만들어진 객체입니다
🍎 OOP basic concept
어플리케이션을 만들때 좋은 설계를 위해서는 다음과 같은 OOP의네가지 개념을 이해하는것이 중요합니다.
- Encapsulation (캡슐화)
- Inheritance (상속)
- Abstraction (추상화)
- Polymorphism (다형성)
말이 너무 어렵다!!!!!!!!!!
🍩캡슐화란 ? 말그대로 타임캡슐처럼 캡슐안에 집어넣는것입니다.
여기서 말하는 캡슐은 객체이고 이 객체안에 들어가야할 것은 데이터와 메소드 입니다.
왜 집어 넣냐구요?
특정 프로퍼티나 매소드를 감추기 위해서 입니다. 다른말로 은닉이라고 하죠!
왜 숨기나고요?
외부에 공개할 필요가 없는 구현의 일부를 숨김으로써 정보를 보호합니다.
🍩추상화란?
내부 구현은 아~~주 복잡한데 실제로 노출되는 부분은 단순하게 만든다는 개념입니다.
텔레비젼이라는 객체가 있을 때 우리는 볼 수 없는 통신장비와 화면을 출력하는 부분들이 내부에 구현되어있습니다.
하지만 우리가 실제로 사용할 때는 내부구조는 생각을 1도 하지 않고 리모콘을들어 채널을 돌립니다.
이렇게 단순하게 인터페이스(상호작용)을 할 수 있습니다.
추상화를 통해 많은기능들이 노출이 안되어서 예기치 못한 사용상의 변화가 일어나지 않도록 할 수 있습니다.
근데 듣자하니 캡슐화의 은닉이랑 비슷하지 않나요?
하지만 캡슐화는 은닉 그 자체에 집중을 하고 있고
추상화는 필요하지 않은것을 노출시키지 않고 단순한 이름으로 정의하는것에 집중을 하고있습니다.
클래스를 정의할 때 매서드와 속성만 정의한 것을 인터페이스라고 부릅니다. 이것의 추상화의 본.질.입니다.
🍩상속이란?
부모 클래스의 특징을 자식 클래스가 물려받는 것입니다.
클래스란 속성이 들어가지 않은 청사진이라고 했습니다.
예를 들어서 사람이라는 클래스가 있습니다.
사람은 이름,나이,상별 같은 속성과
먹다,자다,때리다,눕다,서다 같은 메서드가 있습니다.
여기서 학생이라는 클래스를 작성해봅시다.
학생은 사람이기도 하므로 앞서 구현했던 사람이라는 클래스와 중복이 되는 속성과 매서드가 있습니다!
다시 쓴다면 갱.장.히 비효율적이겠쬬???
그래서 학생클래스는 사람클래스를 상속 받을 수 있습니다.
학생은 거기서 추가적으로 학습 내용 같은 속성과 공부하다 같은 메서드가 추가될 수 있겠쭁?
🍩다형성
드디어 마지막 입니다!!!!!!!!!!
다형성이란 말이죠옹
영어를 봅시다 polymorphism에서 poly는 '많은'을, morph는 '형태'라는 뜻을 가지고 있습니다.
많을 다 모양 형 즉 많은 형태란 뜻이죠옹?
'말하다'라는 동작의 본질은 '입으로 소리를 내다'를 의미합니다.
그러나, 각기 다른 동물들이 '말할 때' 제각각의 소리를 내는 것처럼
객체도 생명체도 아니면서 똑같은 메서드라 할지라도 다른방식으로 구현될 수 있습니다.
아.... 다향성 좀 복잡합니다...
HTML엘리먼트를 예로 들어 설명해보겠습니다.
앞서 DOM을 배울 때 Textarea, Select, Checkbox등을 배웠습니다.
HTML에서는 이와같이 모든 요소를 Element라고 부릅니다.
이 element들을 제가 직접 구현해본다고 상상해보세욤
모든 element들은 전부 객체 이므로
내부적으로 모양을 그리고 화면에 뿌리는 메서드가 존재 합니다.
이 메서드가 render라는 이름을 갖고 있다고 생각해보세용
이 경우 Textarea, Select, Checkbox의 공통부모인 HTML element라는 클래스에,
render라는 메서드를 만들고 상속을 만들 수 있슴돠
However!!!!!!!!!!!
우리는 지금 다향성을 얘기하고 있지 않습니까?
많은 형태의 성질의 핵심은 render라는 메서드가 조금씩 다르게 작동한다는데 있습니다.
TextBox는 가로로 긴 네모상자+커서가 있는 형태
Select는 박스를 눌렀을때 선택지가 나오도록 화면에 그려지는 형태
이처럼 같은 이름을 가진 메서드라도 조금씩 다르게 작동함니다. 이거시 바로 다향성이다~
그러나!!!!!!!!!!!!if(다향성이 없다면..?)부모클래스에서 종류별로 나눠서 하나하나 다르게 만들어야하는 불상사가 일어납니다.
또는 각각의 자식 클래스에 별도의 각기 다른 render함수를 만들 수 도 있다고 생각하셨죠?하지만 element라는 클래스의 본질상 화면에 뿌린다는 개념은 부모가 갖고 있는것이 합리적이라고 하네용
🌹summary
캡슐화는 코드가 복잡하지 않게 만들고 재사용성을 높입니다.- 추상화는 캡슐화처럼 코드를 복잡하지 않게 만들고 단순화된 사용으로 변화에 대한 영향을 최소화 합니다.- 상속역시 코드를 줄여 재사용을 줄 아니 다그냥 다시 코드 짜기 귀찮으니까 만들어진거같네용- 다형성으로 인해 동일한 메서드에 대해 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능합니다.
🌹최종_진짜최종_ 레알최종_렬루최종
그래서 객체지향 프로그래밍이란!!!!!!!?!?!!?!!?
사람이 세계를 보고 이해하는 방법을 흉내낸 방.법.론. 입니다.
'JavaScript' 카테고리의 다른 글
React SPA React Router (4) | 2023.03.23 |
---|---|
Asynchronous (0) | 2023.03.19 |
프로토타입 체인 (0) | 2023.03.15 |
프로토타입과 클래스 (0) | 2023.03.15 |
클래스와 인스턴스 (4) | 2023.03.15 |