1. 컴포넌트

컴포넌트란 UI를 구성하는 독립적인 개별 요소

1-1. 기존의 페이지 작성 방식

하나의 index.html 파일 내에 모든 HTML 태그를 작성하여 관리

as-is.html


<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div id="root">
        <!-- Header -->
        <header>
            <h1>상단 영역</h1>
        </header>
 
        <!-- Body -->
        <main>
            <p>메인 영역</p>
        </main>
 
        <!-- Footer -->
        <footer>
            <p>하단 영역</p>
        </footer>
    </div>
</body>
</html>

1-2. 컴포넌트 기반 작성 방식

하나의 index.html 파일 내에 모든 HTML 태그를 작성하지 않고, 영역별로 별도의 컴포넌트 형태로 구분하여 관리 → JavaScript를 통해 HTML 태그에 대한 렌더링 처리를 수행

component-based.html


<!DOCTYPE html>
<html lang="en">
<head>
    <script src="Header.js">
    <script src="Body.js">
    <script src="Footer.js">
</head>
<body>
    <div id="root">
        <!-- Header 컴포넌트 -->
        <Header />
 
        <!--
        <Header />라고 작성하면, Header.js의 코드를 통해 아래의 HTML 엘리먼트가 그려짐
            <header>
                <h1>상단 영역</h1>
            </header>
        -->
 
        <!-- Body 컴포넌트 -->
        <Body />
 
        <!-- Footer 컴포넌트 -->
        <Footer />
    </div>
</body>
</html>