리액트 설치
Node.js v14.0.0 이상
nom v6.14.0 이상

npx create-react-app 프로젝트 이름(my-app)
cd my-app
npm start

1.기본 컴포넌트 만들기

src/sample/default.jsx

import React from 'react';

function Default(props) {
    return (
        <div>
            기본 컴포넌트 구성
        </div>
    )
}

export default Default;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Default from "./sample/Default";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <Default />
    </React.StrictMode>
);

reportWebVitals();

2.상하위 컴포넌트 조합

Item.jsx

import React from 'react';

function Item(props) {
    return (
        <div>
            <dl>
                <dt>
                    {props.title}
                </dt>
                <dd>
                    {props.description}
                </dd>
            </dl>
        </div>
    )
}

export default Item;

목록으로 사용할 하위 컴포넌트를 만듭니다.

List.jsx

import React from 'react';
import Item from './Item';

function List(props) {
    return (
        <div>
            <Item title="이름" description="홍길동" />
            <Item title="나이" description="25세" />
            <Item title="직업" description="프로그래머" />
        </div>
    )
}

export default List;

하위 컴포넌트를 3번 반복해서 표시한 상위 컴포넌트입니다.
개념을 알기 위해 반복문은 쓰지 않았습니다.