728x90
Reactjs에서는 상속보다 더 강력한 합성을 제공합니다.
상속 대신 합성을 사용하면 컴포넌트 간에 코드를 재활용하기 펼리합니다.
합성의 사용 예제는 아래와 같습니다.
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
참고자료
'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. (0) | 2021.12.23 |
---|---|
클립보드의 이미지를 업로드 후 화면 표기 처리 (0) | 2021.12.17 |
tailwindcss with ReactJS (0) | 2021.02.21 |
JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJS (0) | 2021.02.19 |
Reactjs의 setState는 비동기(asynchronous)로 동작 합니다. (0) | 2021.01.10 |