[Vue.js] v-if 와 모달창 만들기

💡 실습 포인트!

• 오늘은 모달창 UI 와 기능을 만들어보았다.
• 이미 모달창 UI 와 관련해서는 JavaScript 나 React 로도 많이 만들어봤기 때문에 만드는 과정만 잘 기억하고 있으면 문법만 조금씩 바꿔주면 되어 어려운 점은 없었다.
• 그래서 상품명을 클릭하면 모달창 UI 를 띄우고, 모달창 내에서 닫기 버튼을 클릭하면 모달창 UI 를 숨기는 것에 그치지 않고 구글링을 통해 어두운 배경을 클릭했을 때에도 모달창이 닫힐 수 있도록 코드를 수정해주었다.
• 처음에 시도를 했을 때에는 닫기 버튼과 모달창의 하얀 배경만 클릭해봐서 잘 되는 줄 알았는데, 이것저것 누르다보니 코드를 잘못 작성했는지 모달창 내의 내용을 클릭하면 모달창이 닫혀버리는 경우도 발생해서 당황스러웠지만 코드를 다시 작성해서 이제는 오류가 발생하지 않는 것을 알 수 있다.

---

💜 들어가기 전에

• 오늘은 상품명을 클릭하면 상세 페이지가 모달창의 형태로 뜨도록 만들어보았다.
• 모달창이란 위와 같이 기존 페이지가 어둡게 배경처럼 바뀌고 그 위에 하얀 창이 보이는 UI 를 말한다.

 

• Vue 로 모달창과 같이 동적인 UI 를 만드는 방법은 다음과 같다.
  
  • 먼저 HTML UI 레이아웃을 html 및 css 로 작성하여 디자인한다.
  • 만든 HTML UI 의 상태를 데이터로 저장해둔다.
    (예를 들어 모달창이 보이는 상태는 true, 안 보이는 상태는 false!)
  • HTML UI 를 언제 보여주고 언제 보여주지 않을지를 Vue 문법을 이용해 코드를 작성한다.

---

💜 Vue 로 만드는 프로젝트에 이미지 넣기

<img src='./이미지경로'>

• 이미지를 src 폴더 안에 그냥 넣든지, 하위 폴더를 생성해서 넣든지 원하는 방식대로 넣어준 후에 위와 같이 코드를 작성하면 이미지가 나온다.
• Vue 프로젝트 폴더 안에는 src 폴더 말고도 public 폴더가 있는데, public 폴더에 이미지를 넣을 거라면 '/이미지경로' 와 같이 코드를 작성하면 된다.
• 참고로 public 폴더에 이미지를 넣으면 나중에 발행할 때 이미지의 이름이 변하지 않는 반면, src 폴더에 이미지를 넣으면 임의로 이미지의 이름이 바뀐다.

---

💜 모달창 만들기

🤍 모달창 UI 레이아웃 만들기

• 뭔가 버튼을 눌렀을 때 모달창을 띄우고 싶다면 기능을 만들기 전에 모달창 UI 레이아웃부터 html, css 로 디자인을 해주어야 한다.
• 왜냐하면 갑자기 등장하는 동적인 UI 들은 미리 만들어놓고 안 보이게 숨겨두었다가 원하는 때에 UI 를 보이게 띄워주는 방식으로 동작하기 때문이다.

 

<div class="black-bg">
    <div class="white-bg">
        <h4>상세페이지</h4>
        <p>상세페이지 내용</p>
        <button class="close">닫기</button>
    </div>
</div>

• 모달창 html 의 경우 브라우저 화면 전체를 덮는 형식으로 만들어져야 하므로 다른 html 태그들보다 상단에 적어주는 것이 좋다.

 

.black-bg {
	width: 100%; 
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
}

.white-bg {
	width: 90%;
	margin: 80px auto;
	background: white;
	border-radius: 5px;
	padding: 20px 0;
}

.close {
	cursor: pointer;
	border: none;
	background: #6667AB;
	color: white;
	font-weight: bold;
	border-radius: 5px;
	padding: 5px 15px;
}

.close:hover {
	color:white;
	font-weight: bold;
	transform: scale(1.1);
	transition: all 0.5s;
}

---

🤍 모달창 UI 상태를 데이터로 저장하기

data(){
    return {
        openModal : false,
    }

• 모달창의 경우 보이거나 / 보이지 않거나, 이렇게 두 가지의 상태만 존재한다.
• 따라서 보이는 상태를 true, 보이지 않는 상태를 false 로 정한 후에, 초기값으로는 보이지 않도록 false 로 data 보관함의 openModal 에 저장해두었다.
• 나는 boolean 형태가 익숙해서 위와 같이 true/false 로 상태를 정한 거지, 이 부분은 정하는 사람 마음이라 사실 0 과 1 이런 식으로 표현해도 상관 없다.

---

🤍 모달창 UI 를 언제 보여줄지/보여주지 않을지 Vue 문법으로 작성하기

<div class="black-bg" v-if="openModal == true">
    <div class="white-bg">
        <h4>상세페이지</h4>
        <p>상세페이지 내용</p>
        <button class="close">닫기</button>
    </div>
</div>

• 모달창을 보여주는 경우의 상태를 true, 보여주지 않을 경우의 상태를 false 라고 하기로 정했다.
• 따라서 이에 따라 html 태그 안에 v-if='조건식' 을 작성해주면 되는데, 이 문법은 조건식이 참일 때에만 html 을 보여주게 되므로 조건식을 openModal == true 로 작성하면 된다.
• 이 때 등호를 1개 쓰는 것과 2개 쓰는 것은 다르니 주의해야 한다.
  • 등호가 1개인 경우에는 openModal 에 저장된 값을 바로 true 로 바꾸겠다는 의미가 되고, 그에 따라 모달창이 바로 보여지게 된다.
  • 등호가 2개인 경우에는 어떤 조건에 의해 openModal 이 true 로 바뀌는 경우에만 모달창을 보여준다는 의미가 된다.

---

🤍 모달창 UI 를 띄우고 닫을 수 있는 스위치 만들기

// template 전체 코드 미리보기
// 필요한 부분만 빠르게 볼 수 있도록 불필요한 내용은 제외했다.
<div class="black-bg" v-if="openModal == true" @click="close($event)">
    <div class="white-bg">
        <h4>상세페이지</h4>
        <p>상세페이지 내용</p>
        <button class="close">닫기</button>
    </div>
</div>

<div class="card">
    <img src="./assets/images/room0.jpg" class="room-image">
    <h4 class="room-name" @click="openModal = true">{{rooms[0]}}</h4>
    <p>{{ prices[0] }}만원</p>
    <button @click="increase(0)">허위매물신고</button> <span>신고 수: {{ report[0] }}</span>
</div>

 

// script 전체 코드 미리보기
// 필요한 부분만 빠르게 볼 수 있도록 불필요한 내용은 제외했다.
<script>
export default {
	name: "App",
	data(){
		return {
			openModal : false,
		}
	},
	methods: {
		close(event){
			if(event.target.classList.contains('black-bg') || event.target.classList.contains('close')){
				this.openModal = false;
			} else if (event.target.classList.contains('white-bg')){
				this.openModal = true;
			}
		}
	},
};
</script>

• 모달창 UI 에 대한 모든 기능 개발은 완료했고 이제 특정 행위 혹은 조건에 의해 모달창 UI 가 보이게 혹은 보이지 않도록 해보았다.
• 내가 생각한 방법은 상품명을 클릭했을 때는 모달창을 띄우고, 모달창 내의 닫기 버튼이나 어두운 배경화면을 클릭하면 모달창이 닫히게 하는 것이었다.
• 먼저, html 코드에서 모달창 최상단에 해당하는 black-bg 라는 class 를 가진 div 태그에 @click=close($event) 라고 작성해주었다.
  • 모달창이 띄워진 상태에서 내가 클릭한 요소가 black-bg 라는 class 에 해당하거나 close 라는 class 에 해당하면 모달창이 닫혀야 하고, white-bg 에 해당하면 계속 모달창이 열려있어야 했기 때문에 클릭한 요소를 가져올 수 있는 방법을 찾아야 했다.
  • 구글링한 결과 $event 가 클릭한 요소에 해당함을 알 수 있었고 이걸 close() 함수에 파라미터로 받아 나머지 코드를 작성해주었다.
  • close 라는 class 를 가진 button 태그에 따로 @click 속성을 부여하지 않은 이유는 어차피 최상단 태그에 @click 속성이 하위 태그들에 영향을 미쳐서 필요성이 없어졌기 때문이다.
  • data 보관함에 저장된 openModal 을 close() 함수에서 사용하려면 this 라는 키워드를 사용해주는 것도 잊어서는 안된다.