Composition [ 합성 ]

내 할일 잘 하기·2023년 3월 5일
0

React

목록 보기
9/9

Composition : 합성

  • Component에 다른 Component를 담는 것을 칭한다.
  • React는 강력한 합성 모델을 가지고 있다.
    또한, Inheritance [ 상속 ] 보다는 Composition [ 합성 ] 을 사용하여 코드를 재사용하는 것이 좋다.
  • 어떤 children 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있는데, 이러한 Component에서는 특수한 children prop을 사용하여 자식 엘리먼트에 출력해 그대로 전달하는 것이 좋다.
    vue의 ' slot ' 과 비슷한 것으로 보이지만, React에서 prop으로 전달할 수 있는 것에는 제한이 없다.
    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 />}
    		/>
    	);
    }
  • 특수화의 경우로 값을 특정하게 전달하거나 받을 수 있다. '구체적인' 컴포넌트가 '일반적인'컴포넌트를 렌더링하고, props를 통하여 내용을 구성한다.
    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!"
    		/>
    	);
    }
profile
함께 일하고싶은 개발자로 기억될래요

0개의 댓글