강의
(Inflearn) React 처음으로 – SOAPLE
(무료) 처음으로 응답하다 – 인프론 | 강의
JavaScript와 기본적인 CSS 문법으로 React의 기초를 다질 수 있습니다.
– 강의 소개 | 하부 구조
www.inflearn.com
강 13. 구성
합성, 여러 구성 요소를 결합하여 새로운 구성 요소를 생성
1. 격리
- 하위 구성 요소가 있는 형태의 합성 방법
- 사이드바 및 대화 상자와 같은 상자형 구성 요소는 하위 구성 요소를 미리 알지 못합니다.
- 자녀 양육비와 결합하십시오.
예
function FancyBorder(props) {
return (
<div> {props.children} </div>
);
}
결과
구성 요소의 하위 구성 요소는 자식으로 포함됩니다.
2. 전문화
- 보편적인 개념을 명확하게 구현
- 기존 객체 지향 언어에서는 상속을 통해 특수화가 구현됩니다.
- React에서 특수화는 구성을 사용하여 구현됩니다.
봉쇄와 특수화를 함께 사용하여 구현
부모 Component
function Parents(props) {
return (
<Children>
// Specailization
<h1>{props.title}</h1>
<p>{props.message}</p>
// Containment
<p>{props.children}</p>
</Children>
);
}
자식 Component
function Children(props) {
return (
<Dialog
title="화성 탐사 프로그램"
message="닉네임을 입력해 주세요."
>
<input value={nickname} onChange={handleChange} />
<button onClick={handleSignUp}>가입하기</button>
</Dialog>
);
}
사유지
- 구성과 대조됨
- 부모 클래스에서 상속하여 새 자식 클래스를 만듭니다.
* 상속으로 컴포넌트 생성 시 권장할 만한 사례가 발견되지 않았다고 합니다.
(X 사용)
* 복잡한 컴포넌트를 여러 컴포넌트로 쪼개어 결합하여 새로운 컴포넌트를 만드는 것이 좋습니다.