모바일 웹 구축 실무 11주차 정리 - 1 (합성 vs 상속)

합성 vs 상속

---

---

 

---

합성에 대해 알아보기

---

합성(Composition)

•여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것

Containment

하위 컴포넌트를 포함하는 형태의 합성 방법

 

•Sidebar, Dialog 같은 박스 형태의 컴포넌트는 어떤 자식 엘리먼트가 들어올지 예상할 수 없음

•이러한 컴포넌트에서는 Containment 합성 방법을 사용

- 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달

Specialization

범용적인 컴포넌트를 만들어 놓고 이를 특수화(구체화)시켜서 컴포넌트를 합성하는 방식

 

•범용적인 Dialog 컴포넌트 – 모든 종류의 Dialog를 포함하는 개념

•Welcome Dialog는 환영을 위한 구체화된 Dialog 컴포넌트

•Alert Dialog는 경고를 위한 구체화된 Dialog 컴포넌트

---

상속에 대해 알아보기

---

Inheritance

객체지향 프로그래밍에서 부모 클래스의 속성, 함수 등을 물려받아 자식 클래스를 만드는 것

 

•리액트에서는 상속보다 합성을 사용하는 것을 권장

•합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징 하는데 필요한 모든 유연성을 제공

---

[요약]

---

합성이란?

⁃여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것

⁃다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음

---

합성 기법

Containment

•하위 컴포넌트를 포함하는 형태의 합성 방법

•리액트 컴포넌트의 특수한 props.children 속성을 사용

•여러 개의 children 집합이 필요한 경우 별도로 props를 각각 정의해서 사용

Specialization

•범용적인 개념을 구별되게 구체화하는 것

•범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 이를 구체화시켜서 컴포넌트를 사용하는 합성 방법

Containment와 Specialization을 함께 사용하기

•props.children을 통해 하위 컴포넌트를 포함시키기(Containment)

•별도의 props를 선언하여 구체화시키기(Specialization)

---

상속

⁃다른 컴포넌트로부터 상속받아서 새로운 컴포넌트를 만드는 것

⁃상속을 사용하여 컴포넌트를 만드는 것을 추천할 만한 사용 사례를 찾지 못함

⁃리액트에서는 상속이라는 방법을 사용하는 것보다는 합성을 사용하는 것이 더 좋음