[React] # 10 합성 vs 상속
React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용이 가능합니다.
props
- 컴포넌트 계층구조(Component Hierarchy)
: 하나의 컴포넌트가 다른 컴포넌트를 포함할 수 있는 것은 가장 큰 특징이며, 컴포넌트 사이에 부모-자식 관계가 형성됩니다.
- props(properties)
- system for passing data from a parent component to a child component
- 부모 컴포넌트로부터 자식 컴포넌트에 전달되어지는 데이터
<Child name="joon">
- 복수의 props를 통해 여러가지 데이터 전달 가능
<Child name="joon" age=30 position="mentor">
//props는 객체 형태의 데이터
props = {
name: "joon",
age: 30,
position: "mentor"
}
- 결국, 부모 컴포넌트에서 자식 컴포넌트가 어떻게 생기고(UI) 어떻게 동작하며 사용자와 상호작용하는지 props를 통해 결정합니다.
"사용자에 맞게 끔 커스터마이징 및 일부 컨텐츠를 보여주거나 사용자 상호 작용에 반응하는 것이 목적"
"부모요소에서 자식요소의 view나 function을 커스터마이징 하는 것"
- React props system
1) 부모 컴포넌트에서 자식 컴포넌트에게 정보 전달
2) 자식 컴포넌트에서 전달된 정보 사용 / 반영
컴포넌트에서 다른 컴포넌트를 담기
컴포넌트에 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우, children prop
을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다. 이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다.
흔하진 않지만 컴포넌트에 여러 개의 “빈 자리”가 필요할 수도 있습니다. 이런 경우에는 children 대신 자신만의 고유한 방식을 적용할 수도 있습니다.아래의 2번째 예시처럼 컴포넌트(객체)를 props로 전달하여 레이아웃을 구성하는 것도 가능합니다.
👉🏻 테두리 컴포넌트 속 props.children 활용 내용 넣기
👉🏻 props 활용 좌/우 구역 나누기
합성
컴포넌트의 “특수한 경우”인 컴포넌트를 고려해야 하는 경우, 합성을 통하여 더 “구체적인” 컴포넌트가 “일반적인” 컴포넌트를 렌더링하고 props를 통해 내용을 구성합니다. 아래의 예시에서 보면 가장 일반적인 WelcomeDialog → Dialog → FancyBorder 순으로 하향식으로 데이터가 흐르면서 렌더링이 발생합니다.
컴포넌트의 모양과 동작을 커스터마이징할 때 원시 타입의 값, React 엘리먼트 혹은 함수 등 어떠한 props도 받을 수 있습니다. 따라서 UI 즉, View만 변경할 때는 props를 통한 합성으로 이를 제어할 수 있습니다. UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript 모듈로 분리하는 것이 좋습니다. 분리한 모듈은 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있습니다.
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
ReactDOM.render(
<WelcomeDialog />,
document.getElementById('root')
);
객체로서 jsx 문법 이해
자바스크립트 상속 개념
Author And Source
이 문제에 관하여([React] # 10 합성 vs 상속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@simoniful/React-10-합성-vs-상속저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)