컴포넌트 (Component)

컴포넌트란 UI를 독립적이고 재사용 가능한 단위로 분리한 것이다. HTML, CSS, JavaScript로 이루어진 하나의 화면 단위 블록이며, 이 블록들을 조합하여 전체 화면을 구성한다.

컴포넌트 특징

• UI 구조를 논리적으로 분리할 수 있다.
• 독립적이고 재사용 가능하게 설계
• 하나의 컴포넌트는 보통
  • 자체 상태(state)를 가진다.
  • 외부 데이터(props)를 받는다.
  • 화면을 렌더링한다.

컴포넌트와 모듈의 차이

컴포넌트

• UI 단위로 화면의 일부분을 구성하는 블록
• HTML, CSS, JS를 포함하며 주로 React, Vue, Svelte 등에서 사용됨

모듈

• 기능 단위 코드를 의미하며, JS 전체에서 재사용성과 유지보수를 위해 사용됨
• 함수, 변수 등을 export/import로 관리 (Node.js, 브라우저 등에서 사용)

컴포넌트 예시

HTML

<div id="app"></div>

Javascript

// JS
function CardComponent(title, description) {
  return `
    <div class="card">
      <h2>${title}</h2>
      <p>${description}</p>
    </div>
  `;
}

document.getElementById("app").innerHTML = CardComponent("제목", "설명");

• 하나의 UI 조각을 함수처럼 만든 것도 컴포넌트 개념에 해당한다.
• 프레임워크 없이 순수 JS로 구현해도, 이러한 구조는 컴포넌트 패턴(Vanilla JS)에 해당한다.