조합과 상속 비교
공유 동작에는 상속보다 조합을 우선합니다.
조합과 상속 비교은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
두 가지 재사용 전략
컴포넌트 간에 동작을 공유하려면 상속(기반 클래스를 확장하는 방식) 또는 조합(작은 구성 요소를 결합하는 방식)을 사용할 수 있습니다. Angular의 조합 API에서는 조합을 기본 방식으로 권장합니다.
상속 복습
상속을 사용하면 컴포넌트가 기반 컴포넌트 또는 지시문을 확장하고 해당 입력, 출력 및 로직을 재사용합니다.
export class FancyButton extends BaseButton {
// inherits BaseButton members
}상속의 한계
클래스는 하나의 기반만 확장할 수 있습니다. 계층이 깊어지면 구조가 경직되고, 원하지 않는 부분까지 모두 상속하게 됩니다.
다이아몬드 문제
상속으로 여러 동작을 결합하려면 어색한 연결 구조가 필요하므로 사실상 불가능합니다. 조합은 여러 지시문을 독립적으로 적용하여 이 문제를 피합니다.
조합 복습
조합을 사용하면 컴포넌트는 본래 목적에 집중하면서 hostDirectives를 통해 필요한 만큼 동작을 가져올 수 있습니다.
hostDirectives: [ElevateDirective, RippleDirective, FocusTrapDirective]조합 우선하기
"상속보다 조합을 우선하라"는 지침은 Angular에서 특히 중요합니다. 조합은 유연하고 기능을 더해 가기 쉬우며 취약한 기반 클래스를 피할 수 있습니다.
상속이 여전히 적합한 경우
가깝게 관련된 변형들이 하나의 안정적인 기반을 공유하는 경우에는 상속도 괜찮습니다. 예를 들어 기반 폼 필드를 변형 컴포넌트가 특화할 수 있습니다. 계층은 얕게 유지하십시오.
두 방식 함께 사용하기
두 접근 방식을 결합할 수도 있습니다. 공유 구조에는 얇은 기반을 확장하고, 여러 영역에 걸친 관심사에는 동작을 조합하십시오.
캡슐화
조합은 각 동작의 내부 구현을 비공개로 유지하고 선택한 입력과 출력만 노출하지만, 상속은 기반의 전체 API를 노출합니다.
조합으로 리팩터링하기
기반 클래스에 서로 관련 없는 책임이 쌓이면 각각을 지시문으로 분리하여 조합하십시오. 결과적으로 모듈성과 테스트 용이성이 향상됩니다.
선택 가이드
서로 독립적인 동작이 여러 개 필요합니까? 조합하십시오. 하나의 공유 구조적 기반이 필요합니까? 얕은 기반을 사용해도 됩니다. 유연성을 위해 기본적으로 조합을 선택하십시오.
빠른 확인
조합과 상속의 차이에 대한 이해도를 확인해 보십시오.
요약
hostDirectives를 통해 집중된 동작을 결합하는 조합이 하나의 기반 클래스를 사용하는 상속보다 유연하고, 취약한 계층 구조를 피할 수 있으며, 기본 방식으로 사용해야 한다는 것을 배웠습니다. 단, 공유 구조에는 얕은 상속을 사용할 수 있습니다.
자주 묻는 질문
“조합과 상속 비교” 강의는 무료인가요?
네 — “조합과 상속 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“조합과 상속 비교”에서 뭘 배우나요?
공유 동작에는 상속보다 조합을 우선합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“조합과 상속 비교” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.