[Vue3] HTML 복잡해보이면 Component

HTML 짜다 보면 <div>가 수십 개 나오는 게 일상. 이게 싫으면 컴포넌트를 만들어서 사용하면 됩니다. 원하는 HTML 덩어리를 한 글자로 축약할 수 있게 도와주는 문법이 바로 컴포넌트입니다.

---

1️⃣ 컴포넌트란?

컴포넌트를 사용하면 긴 HTML을 간결하게 축약할 수 있습니다.

예를 들어 할인 배너를 하나 만들고 싶다면…

<div class="discount">
  <h4>지금 결제하면 20% 할인</h4>
</div>

이 코드가 너무 길고 복잡하다고 가정할 때, 컴포넌트를 사용하면 짧고 재사용 가능한 단위로 만들 수 있습니다.

---

2️⃣ 컴포넌트 만드는 법

컴포넌트를 만드는 방법을 요약하면, 아무 곳에나 .vue 파일을 만들고 그 안에 축약할 HTML을 붙여넣으면 됩니다.

중요!

• 파일 이름: 이제 컴포넌트 파일 이름은 귀찮더라도 2단어 이상으로 작명해야 합니다. 예) DiscountBanner.vue
  (만약 2단어 미만으로 작명하면 에러로 잡아줍니다. 싫으면 package.json 파일의 "rules" 항목을 열어서 수정할 수 있습니다.)

예제: DiscountBanner.vue

<template>
  <div class="discount">
    <h4>지금 결제하면 20% 할인</h4>
  </div>
</template>

<script setup>
  // 할인 배너 컴포넌트
  // 파일 이름은 반드시 두 단어 이상으로 작명 (예: DiscountBanner.vue)
</script>

<style scoped>
.discount {
  /* 예시 스타일 */
  background-color: #f8f9fa;
  padding: 1rem;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

---

3️⃣ 컴포넌트 쓰는 법

원하는 곳에서 위에서 만든 컴포넌트를 import하고 사용하면 됩니다.

예제: ParentComponent.vue

<template>
  <div>
    <!-- 할인 배너 컴포넌트를 사용 -->
    <DiscountBanner />
  </div>
</template>

<script setup>
import DiscountBanner from './DiscountBanner.vue'
</script>

<style scoped>
/* 필요에 따라 스타일 추가 */
</style>

사용 방법 요약:

1. 원하는 컴포넌트 파일(예: DiscountBanner.vue)을 생성합니다.
2. 해당 파일 안에 <template>, <script setup>, <style>을 정의합니다.
3. 다른 컴포넌트에서 import하여 <DiscountBanner /> 처럼 사용합니다.

---

4️⃣ 모달 창도 컴포넌트화 해봅시다

이전에 만들어 놓은 모달창 코드는 매우 길고 복잡했습니다. 이를 컴포넌트로 축약해봅니다.

(단, 모달창이 안 열리는 문제는 데이터 바인딩 문제일 수 있으니, 다음 강의에서 해결 방법을 다룰 예정입니다.)

예제: ModalDialog.vue

<template>
  <div class="modal">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
  // 모달 컴포넌트
  // 사용 시 모달이 안 열리는 경우, 데이터 바인딩 문제일 수 있으니 다음 강의에서 다룰 예정입니다.
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* 기본적으로 숨김 처리 */
}

.modal-content {
  background: white;
  padding: 1rem;
  margin: 10% auto;
  width: 80%;
}
</style>

---

5️⃣ 컴포넌트를 사용하는 이유

• HTML 간결화: <div> 여러 개 있는 거 보기 싫으면 컴포넌트로 축약합니다.
• 재사용성: 다른 곳에서도 같은 HTML 덩어리를 쉽게 재사용할 수 있습니다.
• 유지보수 용이: 나중에 라우터로 페이지를 구분할 때, 한 페이지를 하나의 컴포넌트로 만들면 관리하기 편합니다.

---

📌 정리

컴포넌트를 사용하면 긴 HTML을 한 글자로 축약할 수 있어 개발 시간이 줄어들고 코드 관리가 쉬워집니다.