TypeScript_STUDY 13장 _ 타입스크립트와 객체지향 [ 13.1 타입스크립트와 객체지향 | 13.2 우아한형제들의 활용 방식 | 13.3 캡슐화와 추상화 | 13.4 정리 ]

13.1 타입스크립트와 객체지향

"프론트엔드에 객체 지향을 어떻게 적용하지?"

자바스크립트는 전통적인 객체 지향 프러그래밍 언어에서 기대할 수 있는 일부 기능을 지원하지 않아 객체 지향을 온전히 구현하는데 부족함이 있음. ( 제약 )

-> 이러한 제약
타입스크립트가 private과 같은 접근 제어자나 추상 클래스, 추상 메서드 같은 기능을 지원해주며 해결함.
( 타입스크립트 = 자바스크립트의 슈퍼셋)

타입스크립트 = 점진적 타이핑 + 구조적 타이핑 + 덕 타이핑

타입스크립트 활용해 프론트엔드에서 개체 지향 구현
컴포넌트는 스스로 책임을 져야하는 역할 수행, 다른 컴포넌트 객체와 협력하는 독립적인 객체.
JSX문법 -> 컴포넌트를 개발하면서 사실상 객체 지향을 구현

타입스크립트는 prop을 인터페이스로 정의 가능.
객체 지향 패러다임에서는 객체 간의 협력 관계에 초점
컴포넌트 간의 협력 관계를 표현하는 것이 prop.

객체 자체가 아니라 프레임워크에 의해 객체의 의존성이 주입되는
DI(Dependency Injection. 의존성 주입) 패턴을 따르는데,
이러한 패턴을 더욱 명확하게 표현할 수 있게 해주는 것이 타입스크립트다.

리액트나 뷰 같은 도구를 사용하며 DI 활용

컴포넌트 간의 협력 관계를 먼저 고려하고 메시지를 저하는 것은 현실적으로 힘든 일.

변경이 용이하고 유지보수성이 높은 설계를 하기 위해 객체 지향을 구현하는 것인데
사전에 레이아웃의 변화를 예측할 수 없음.

.
.
.

13.2 우아한형제들의 활용 방식

< 설계 방식 >

• 온전히 레이아웃만 담당하는 컴포넌트 영역
• 컴포넌트 영역 위에서 레이아웃과 비즈니스 로직을 연결해주는 커스텀 훅 영역
• 훅 영역 위에서 객체로서 상호 협력하는 모델 영역
• 모델 영역 위에서 API를 해석하여 모델로 전달하는 API 레이어 영역

.
.
.

API 레이어 영역

클래스는 객체를 표현하는 방법의 도구일 뿐
컴포넌트를 함수형으로 선언하든 클래스형으로 선언하든 모두 객체를 나타냄.

리액트 훅이 나온 순간부터 함수 컴포넌트의 사용률이 높아짐.
실제로 리액트 공식 문서에서도 함수 컴포넌트를 권장.

상속 구조가 복잡해지면 코드 해석이 어려워지고 디버깅도 힘들어짐.
어떤 방식이 가장 적합한지 심도 있게 고민하면서 설계해야 함.

13.3 캡슐화와 추상화

• 캡슐화
  : 다른 객체 내부의 데이터를 꺼내와서 직접 다루지 않고,
  해당 객체에서 처리할 행위를 따로 요청함으로써 협력하는 것.
  -> 결국 컴포넌트 내의 상태와 prop을 잘 다루는 것도 캡슐화의 개념에 부함하는 것.

프로젝트 설계의 궁극적인 목표는 객체들이 유기적으로 협력하게끔 만들어서 적젏게 도메인 분리를 하는 것.
객체들을 모델링하는 과정 자체가 추상화다

Prop drilling이 심할수록 컴포넌트 간의 결합도는 높아지며 내부 처리 로직이 외부로 드러나기 마련...즉, 캡슐화를 저해함.
이런 문제 해결하기 위해
옵저버 패턴이 등장 -> 나아가 컨텍스트 API 및 Redux, MobX,Recoil과 같은 다양한 상태 관리 라이브러리.

.
.
.

13.4 정리

함수, 클래스, 모듈을 분리하는 것도 객체 지향 프로그래밍의 일부이다.

우선 객체나 책임을 심경 쓰지 않고 개발 속도에 집중하여 화면 전체를 만든 후에 각 부분의 역할과 책임을 나누면서 리팩터링하는 방법도 객체 지향 구현 트레이닝.
-> 개별적인 컴포넌트를 먼저 생각하게 될지도...?

• 현실 세계를 잘 반영하고 좋은 추상화를 어떻게 만들지 고민하며 개발한담녀 변경에 유연하고 유지보수하기 쉬운 설계를 구축할 수 있을 것이다.
  .
  .
  .

---

도서참조 : 우아한 타입스크립트 with 리액트