상속 대신 합성을 사용해 컴포넌트간 재사용 권장

컴포넌트에서 다른 컴포넌트 담기

컴포넌트에 어떤 자식요소가 들어올 지 예측하기 어려움. 이런 경우 부모요소에 children props를 사용해 자식 엘리먼트를 전달.

function Parents ({children}){
	return (
      	<div className = "Parents">
  		{children}
       	</div>
    )
}

function App() {
  return (
	<Parents>
      		<Child>
        </Parents>
  )
}

만약 여러개의 children을 전달하고 싶은 경우, props에 JSX 객체를 전달 할 수 있음.

function Parents ({one, two}){
	return (
    	<div className = "Parents">
        	{one}
        	{two}
        </div>
    )
}

function App() {
  return (
	<Parents one = {<One/>} two = {<Two/>} />
  )
}

특수화

어떤 컴포넌트에 대해 일반화시킬 수 있는 부분이 있다면, 일반적인 컴포넌트를 먼저 작성하고 그 컴포넌트의 props를 이용해 일반적인 컴포넌트를 통해 구체적인 컴포넌틀를 생성할 수 있도록 함.

상속

컴포넌트를 상속 계층 구조로 사용하기 위한 좋은 사례는 아직 발견되지 않음.
props와 합성을 이용해 충분히 안전한 방식으로 커스터마이징 가능.
(props로 넘겨 받을 수 있는 데이터 타입이 진짜 다양함)

함수를 여러곳에서 재사용하기 원한다면 별도의 JavaScript모듈로 분리 -> import를 통해 사용가능