처음 만난 리액트 문서
5.4 컴포넌트 합성
컴포넌트 합성은 여러 개의 컴포넌트들을 합쳐서 하나의 컴포넌트를 만드는 것입니다. 리액트에서는 컴포넌트 안에 또 다른 컴포넌트를 사용할 수 있기 때문에, 복잡한 화면을 여러개의 컴포넌트로 나눠서 구현할 수 있습니다. 아래에서 Welcome컴포넌트를 사용해서 컴포넌트 합성을 하는 예제 코드를 한 번 보도록 하겠습니다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App(props) {
return (
<div>
<Welcome name="Mike" />
<Welcome name="Steve" />
<Welcome name="Jane" />
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
위 코드를 보면 props의 값을 다르게 해서 Welcome컴포넌트를 여러번 사용하는 것을 볼 수 있습니다. 이렇게 하면 App이라는 컴포넌트는 Welcome컴포넌트 세 개를 포함하고 있는 컴포넌트가 되는 것이죠. 이렇게 여러개의 컴포넌트들을 합쳐서 또 다른 컴포넌트를 만드는 것을 컴포넌트 합성(Composing components) 이라고 합니다. 위에 나온 App컴포넌트를 조금 더 쉽게 그림으로 표현해보겠습니다.
App컴포넌트 안에 세 개의 Welcome컴포넌트가 있고, 각각의 Welcome컴포넌트는 각기 다른 props를 가지고 있습니다. 이렇게 App컴포넌트를 root로 해서 하위 컴포넌트들이 존재하는 형태가 리액트로만 구성된 앱의 기본적인 구조입니다. 만약 기존에 있던 웹페이지에 리액트를 연동한다면, Root Node가 하나가 아닐 수 있기 때문에 이런 구조가 되지 않을수도 있습니다.
마지막 업데이트: 2025년 08월 21일 08시 08분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page