상품을 누르면 뜨는 상세페이지를 모달창 스타일로 만들어보는 예제를 통해, Vue를 사용한 동적 UI 제작 단계를 알아봅니다.
모달창이란?
배경은 어둡게 처리하고 중앙에 하얀 창이 나타나는 UI를 의미합니다.
상품명을 클릭하면 모달창을 띄워서 상세페이지 내용을 보여줍니다.
1️⃣ 동적 UI 제작의 기본 단계 ⭐⭐⭐
- 현재 HTML UI의 상태를 데이터로 저장
- 예: 모달창이 보이는지 여부(보임/숨김)
- 데이터 상태에 따라 HTML UI를 보여줄지 말지 결정
- Vue의 v-if 지시자를 사용해 조건부 렌더링 구현
이 두 가지만 기억하면 모달창뿐만 아니라 탭, 서브메뉴 등 누르면 동작하는 UI를 직접 만들 수 있습니다.
2️⃣ 이미지 넣는 법
- src 폴더 사용 시:
<img src="./경로"> - public 폴더 사용 시:
<img src="/경로">
참고: public 폴더에 넣으면 나중에 발행할 때 이미지 이름이 변하지 않습니다.
3️⃣ 모달창 HTML & CSS 디자인
HTML (예시 코드 – 상단에 위치시키세요):
<div class="black-bg">
<div class="white-bg">
<h4>상세페이지</h4>
<p>상세페이지내용임</p>
</div>
</div>
CSS:
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.black-bg {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
padding: 20px;
}
.white-bg {
width: 100%;
background: white;
border-radius: 8px;
padding: 20px;
}
미리 HTML과 CSS로 모달창 디자인을 완성해두고, 나중에 Vue를 통해 동적으로 보여주거나 숨기는 방식으로 구현합니다.
4️⃣ Vue를 이용한 동적 모달창 구현
Step 1. 모달창 상태를 데이터로 저장
모달창은 보임/숨김 상태만 존재합니다.
기존 Vue2 문법에서는 아래와 같이 작성했지만…
// Vue2 Options API (예시)
data(){
return {
모달창열렸니: true,
}
}
→ Vue3 문법으로 리팩토링하면 다음과 같이 작성합니다:
<script setup>
import { ref } from 'vue'
// 모달창 보임 여부 (true: 보임, false: 숨김)
const 모달창열렸니 = ref(true)
</script>
설명:
ref를 사용해 반응형 데이터를 생성합니다. 템플릿에서는모달창열렸니를 직접 사용할 수 있습니다.
Step 2. 데이터 상태에 따른 조건부 렌더링 (v-if 사용)
HTML에서 모달창을 조건부로 보여주기 위해 v-if 지시자를 사용합니다.
<div class="black-bg" v-if="모달창열렸니">
<div class="white-bg">
<h4>상세페이지</h4>
<p>상세페이지내용임</p>
</div>
</div>
설명:
모달창열렸니가true일 때만 위<div class="black-bg">요소가 렌더링됩니다.(원래 코드에서는
v-if="모달창열렸니 == true"로 작성했지만, 불리언 값이므로 간단히v-if="모달창열렸니"로 사용합니다.)
5️⃣ 모달창 토글 및 추가 기능
이제 '모달창열렸니' 데이터 값을 조작하여 모달창을 열고 닫을 수 있습니다.
예를 들어, 상품 제목을 클릭했을 때 아래와 같이 이벤트 핸들러로 모달창 상태를 변경할 수 있습니다.
<!-- 상품 제목 클릭 시 모달창 열기 (예시) -->
<h3 @click="모달창열렸니 = true">상품 제목</h3>
참고:
모달창을 닫는 버튼이나 영역에 @click 이벤트를 달아
모달창열렸니 = false로 상태를 변경하면 모달창을 숨길 수 있습니다.
6️⃣ 오늘의 상식
- data(){} 부분은 React의 state와 유사합니다. → UI의 현재 상태(데이터)를 저장하는 곳입니다.
