Nest Components

중복으로 사용가능한 (재사용 가능한)컴포넌트를 만들어서 사용할 수 있다.

Nest Components 생성

index.js

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom/client';

function Greeting() {
    return <div>
        <Person/>
        <Message/>
    </div>
}
export default Greeting;

const Person = () => <h1>재석</h1>
const Message = () => {
    return <p>메세지입니다.</p>
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Greeting/>)

사이드바, 헤더, 푸터 등 여러 화면에서 보여줘야 하는것을 컴포넌트로 만들어서 사용하면 관리하는 측면에서 매우 유용하다.