React - component 합성과 추출

 Component 합성

 리액트에서는 Component안에 또 다른 Component를 사용할 수 있다.

따라서 복잡한 화면을 여러개의 Component로 구성할 수 있다. 

 

예시)

function Welcome(props) {
	return <h1>Hello, {prop.name} </h1>;
}

function App(props){
	reutrn(
    	<div>
       		<Welcome name="Mike" />
            <Welcome name="Steave" />
            <Welcome name="Jane" />
        </div>
    )
}

ReactDom.render(
	<App />,
    document.getElemnetById("root")
);

위 코드를 보면 Welcom 컴포넌트를 prop 를 다르게하여 여러번사용하는 것을 볼 수 있다.

App이라는 Compoent는 Welcome이라는 컴포넌트를 포함하고 있는데 이러한 것을 컴포넌트 합성이라고 한다.

 

 Component 추출

컴포넌트 합성과 반대로 복잡한 컴포넌트를 쪼개서 여러개로 나눌 수 있는데 이를 Component 추출이라고 한다.

이렇게 Compoent를 추출해서 세분화 시키면 재사용성이 올라가는데

 

이는 곧 Component의 존재 목적과 기능을 명확히 하고 단순화 시킬 수 있고 이는 개발속도를 상승시킬 수 있는 요인으로

작용할 수도 있다.