[애플코딩] 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드 (2)

인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드

인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드 - 코딩애플 온라인 강좌

 

Vue 9강, 10강 : props

데이터 바인딩은 같은 파일 내에 데이터가 있어야 가능하다.

그런데, 데이터를 복사해 가져온다면 데이터 변경사항 수정에 어려움이 생긴다.

 

같은 파일 내에 없다면 props로 가져다 쓰면 된다.

가져온 데이터는 재할당이 되지 않는다.

 

TIP

부모 컴포넌트와 자식 컴포넌트(하위 컴포넌트)의 개념.

 

자식 컴포넌트가 부모 컴포넌트의 데이터를 쓰려면 props로 자식 컴포넌트에게 데이터를 전송하면 된다.

순서는 다음과 같다.

 

1. 데이터 전송

원하는 데이터를 선택하여 <자식컴포넌트명 :데이터명 = "데이터명" /> 형식으로 데이터를 전송한다.

• props를 보낼 때는 array, string 등 다양한 자료형 입력이 가능하다. ex) <Array :array1="[123,456]" /> 
• 오브젝트를 각각 보내는 것도 가능하다. ex) <Object v-bind="object1" : name="object1.name" :age="object1.age" />

 

App.vue

//template 부분
<Modal :oneroom="oneroom" :click="click" :moopen="moopen" />

 

2. 데이터 등록

자식 컴포넌트에서 props로 받은 데이터를 default 안에 props : { 데이터명 : 자료형 } 형식으로 등록한다.

 

Modal.vue

//script 부분
export default {
    name : 'MoDal',
    props : {
      oneroom : Array,
      click : Number,
      moopen : Boolean,
    }
}

 

 

3. 데이터 사용

등록을 했으면 해당 예시와 같이 사용하면 된다.

 

//template 부분
<img :src="oneroom[click].image" class="room-img">
<h4>{{ oneroom[click].title }}</h4>
<p>{{ oneroom[click].content}}</p>
<p >{{ oneroom[click].price }}원</p>

 

Q. 애초에 자식 컴포넌트에 데이터를 만들면 되는 것 아닌가?
A. 위로 전송이 어렵기 때문에 부모 컴포넌트도 사용하는 데이터면 부모 컴포넌트에 만드는 것이 좋다.

 

과제

상품 목록을 <Card /> 컴포넌트로 변경.

재할당 오류 부분은 주석 처리.

 

---

 

 

App.vue

//template의 맨 아래
<!-- 상품 상세 -->
<Card :oneroom="oneroom[i]" v-for="(a,i) in oneroom" :key="i" />

//scrpt 부분 컴포넌트 등록
import Card from './Card.vue';

//scrpt default components 안
Card : Card,

 

Card.vue

<template>
  <!-- 원룸 -->
  <div>
    <img :src="oneroom.image" class="room-img">
    <h4>{{ oneroom.title }}</h4>
    <p>{{ oneroom.price }}원</p>
  </div>
</template>

<script>
export default {
  name: 'CaRd',
  props: {
    oneroom : Array,
  }
}
</script>

<style>

</style>

 

Vue 11강 : custom event

이제 재할당으로 수정이 안 되는 부분(읽기전용 데이터)를 해결해야 한다.

부모 컴포넌트에서 아래와 같이 수정하는 방식을 사용하면 자식 컴포넌트의 어느 부분을 눌러도 모달창이 열려버린다.

 

<Card @click="moopen = true" :oneroom="oneroom[i]" v-for="(a,i) in oneroom" :key="i" />

 

 

제목을 클릭했을 때만 모달창이 열리게 하기 위해서는 custom event 문법을 사용해 데이터를 변경시키면 된다.

 

1. 변경 요청 보내기 

자식 컴포넌트에서 $emit('변수명', 데이터) 형식으로 요청을 보낸다.

함수로 만들어 코드 앞과 데이터 앞에 this.를 붙여 사용해도 된다.

 

Card.vue

//template
<h4 @click="$emit('openModal', oneroom.id)">{{ oneroom.title }}</h4>

 

2. 변경 요청 받기

부모 컴포넌트에서 @변수명="" 형식으로 요청을 받는다. 데이터를 받을 때는 $event를 사용한다.

 

App.vue

//template
<Card @openModal="moopen = true; click = $event" :oneroom="oneroom[i]" v-for="(a,i) in oneroom" :key="i" />

 

 

과제

모달창 닫기 버튼 만들기.

 

---

 

 

App.vue

//template
<Modal @closeModal="moopen = false" :oneroom="oneroom" :click="click" :moopen="moopen" />

 

Card.vue

//template
<h4 @click="$emit('openModal', oneroom.id)">{{ oneroom.title }}</h4>

 

Vue 12강 : v-model

사용자의 input 데이터를 받기 위해 Modal.vue에 input 태그를 작성한다.

 

Modal.vue

//template
<input @input="month = $event.target.value"/>
<p>{{ month }}개월 선택 : {{ oneroom[click].price * month }}원</p>

//script-default
data(){
  return {
    month : 1, //받는 데이터 형식에 따라 초기값 설정
  }
},

 

<input> 데이터 값을 받을 때 v-model로 코드를 축약할 수 있다.

textarea, select 에도 v-model 사용 가능하다.

 

Modal.vue

//template
<input v-model="month"/>

 

TIP
데이터에서 변수 선언 시에 설정한 초기값과는 상관없이 input 데이터를 받아온 변수에는 문자가 담긴다.
곱셈을 할 때는 괜찮지만, 덧셈을 하게 되면 '문자숫자' 이렇게 나열된다.
v-model.number로 데이터를 받아오면 받아온 데이터가 숫자 자료형으로 저장된다.

Modal.vue

//template
<input v-model.number="month"/>​

 

Vue 13강 : watch

watch는 데이터를 감시하는 함수이다.

watch를 이용하여 input에 문자를 입력할 시에 경고문을 띄울 수 있다.

 

Modal.vue

//script-default
watch : {
  month(a){ //(month의 변경 후 데이터, month의 변경 전 데이터)
    //month 데이터가 변할 때마다 이곳의 코드 실행
    if(a >= 13){
      alert('12 이하로 입력해 주세요.')
    }
  }
},

 

TIP
참고로 type을 range로 선택해 min max 값을 주는 방식도 있다. ex) <input type="range" min="1" max="12"/>
또한, Vue 전용 form validation 라이브러리를 설치해 사용해도 된다.

 

 

과제

<input>에 글자를 입력하면 경고창을 띄우고 month 값을 1로 되돌리기.

 

---

 

 

Modal.vue

//script-default-watch-month
if(isNaN(a) == true){
  alert('숫자를 입력해 주세요.')
  this.month = 1;
}

 

Vue 14강 : transition

CSS를 이용해 모달창을 띄울 때 투명도가 0에서 1로 증가하는 애니메이션 효과를 만들어 본다.

 

1. 애니메이션 시작점의 클래스명

 

//style
.start {
  opacity: 0; /* 투명도 */
  transition: all 1s; /* 걸리는 시간 */
}

 

2. 애니메이션 끝점의 클래스명

 

//style
.end {
  opacity: 1;
}

 

3. 필요한 곳에 클래스명 부착

클래스명을 조건부로 넣으려면 { 클래스명 : 조건 } 형식을 사용한다.

 

//template
<div class="start" :class="{ end : moopen }">
  <Modal @closeModal="moopen = false" :oneroom="oneroom" :click="click" :moopen="moopen" />
</div>

 

 

그런데, Vue에서는 <Transition>을 이용해 애니메이션을 줄 수도 있다. 이 방법을 사용한다.

 

1. <Transition>

애니메이션을 주고 싶은 요소를 <Transition name="이름"></Transition>으로 감싸기

 

App.vue

//template
<Transition name="fade">
  <Modal @closeModal="moopen = false" :oneroom="oneroom" :click="click" :moopen="moopen" />
</Transition>

 

2. class명 3가지 작성

 

App.vue

//style
.fade-enter-from { /* 등장 */
  transform: translateY(-1000px);
}
.fade-enter-active {
  transition: all 1s;
}
.fade-enter-to {
  transform: translateY(0px);
}

.fade-leave-from { /* 퇴장 */
  opacity: 1;
}
.fade-leave-active {
  transition: all 1s;
}
.fade-leave-to {
  opacity: 0;
}

 

Vue 15강 : sort

가격 순으로 정렬을 시킬 수 있는 버튼 구현.

 

App.vue

//template
<!-- 상품 정렬 버튼 -->
<button @click="priceSort">가격순정렬</button> <!-- 버튼 누르면 함수 실행-->

//script-default-methods
priceSort(){
  this.oneroom.sort(function(a,b){
    return a.price - b.price
  })
},

 

sort()는 문자를 가나다순으로 정렬해 주는 함수이다.

원본이 변형된다는 특징이 있으며, map(), filter() 함수는 원본을 보존해 준다.

 

이 함수를 숫자순 정렬로 활용하려면 sort(function(a,b){ return a-b });와 같은 식으로 사용해야 한다.

특정 함수끼리 뺄셈을 해 보고 음수가 나오면 a를 왼쪽으로 보내는 방식이다.

 

 

되돌리기 버튼도 구현해 본다.

 

App.vue

//template
<button @click="sortBack">되돌리기</button>

//script-default-data-return
oneroomOriginal : [...data], //원본 보존

//script-default-methods
sortBack(){
  this.oneroom = [...this.oneroomOriginal];
}

 

여기서, 원본 데이터 보존을 위해 array/object 데이터의 별개 사본을 만들려면 [...array데이터] 이런 형식을 사용해야 한다.

또한, 등호로 array를 재할당하면 왼쪽과 오른쪽의 값을 공유하라는 의미가 된다. 위와 같은 형식 사용.

 

나중에 해보기

상품명 가나다순 정렬은 어떻게 할까요?
가격 역순 정렬은요?
50만원 이하의 상품만 보여주는 필터기능은요? 

 

Vue 16강 : lifecycle hooks

할인 배너를 2초 뒤에 사라지게 하는 애니메이션 만들기 위해서는 컴포넌트의 lifecycle을 알아야 한다.

컴포넌트는 웹페이지에 표기되기까지 일련의 step을 거친다. 그 step을 lifecycle이라고 한다.

 

1. create 단계

데이터만 존재하는 단계이다.

 

2. mount 단계

Vue 컴포넌트를 실제 HTML로 바꾸는 단계이다.

 

3. 컴포넌트 생성

index.html에 장착하는 단계.

 

4. update/unmount

data가 변할 때마다 컴포넌트가 재렌더링/컴포넌트 삭제.

 

이러한 단계로 lifecycle이 실행되는데, 우리는 lifecycle hook을 걸어 중간에 원하는 코드를 실행 가능하다.

참고로 서버에서 데이터를 가져올 때도 lifecycle hook 안에 코드를 짠다.

아래와 같은 함수로 lifecycle hook을 설정한다.

 

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()

 

 

할인배너가 2초 뒤에 사라지는 lifecycle hook을 만들어 보자.

 

//template
<Discount v-if="showDiscount == true" />

//script-default-data-return
showDiscount : true,

//script-default
mounted(){ //html에 mount될 때 실행
  setTimeout(()=>{
    this.showDiscount = false;
  }, 2000);
},

 

TIP
this.를 사용할 경우, => 에로우 펑션을 써야 에러가 나지 않는다.

 

과제

1. setInterval() 사용하여 메인페이지 로드 후부터 30% 할인 문구가 1초마다 1%씩 감소하도록 기능 구현

2. lifecycle hook update로 모달창 input 안에 2를 기입했을 때 알림창 띄우기

---

1.

 

Discount.vue

//template-div
<h4>지금 결제하면 {{amount}}% 할인</h4>

//script-default
data(){
  return{
    amount : 30,
  }
},
mounted(){
  setInterval(()=>{
    this.amount--;
  }, 1000);
}

 

2.

 

Modal.vue

//script-default
beforeUpdate(){
    if (this.month == 2){
      alert('2개월 구매 불가능')
    }
 }

 

 

문법 참고 사이트

Creating a Vue Application | Vue.js