[Vue.js] transition, sort 와 spread operator 를 활용한 데이터 정렬 및 보존

✔️ UI 애니메이션 주기

.start {
  opacity: 0;
  transition: all 1s;
}

.end {
  opacity: 1;
}

 

start 와 end css 코드를 작성해놓고

  <div class="start" :class="{ end : modal_status }">
    <Modal @closeModal="modal_status = false" :onerooms="onerooms" :user_clicked="user_clicked"
      :modal_status="modal_status" />
  </div>

 

위처럼 Modal Component 를 div 로 감싸 초기 class 상태를 start 로 만들어주고, :class 를 활용해 modal_status 가 true 일 때만 end class 를 붙여주도록 조건부를 달아줄 수 있다.

 

vue 에서 제공하는 태그가 있는데,

  <transition name="fade">
    <Modal @closeModal="modal_status = false" :onerooms="onerooms" :user_clicked="user_clicked"
      :modal_status="modal_status" />
  </transition>

 

이렇게 transition 태그로 감싸주고 name 에 작명을 해준다.

 

이후 아래에 style 태그에서

.fade-enter-from {
  시작 시 스타일
}

.fade-enter-active {
  동작
}

.fade-enter-to {
  끝날 시 스타일
}

 

작명에 enter from active to 를 붙여서 클래스를 만들어준다.

 

반대로 퇴장 애니메이션은

fade-leave-from active to 를 만들어서 Modal 이 닫힐 때의 애니메이션을 지정할 수 있다.

---

✔️ 데이터 정렬

 1. sort

 <button @click="priceSort">가격순 정렬</button>

 

가격순 정렬 버튼을 만들고 버튼이 눌렸을 때 data 의 price 를 오름차순으로 정렬하는 기능을 만들고자 했다.

 

  methods: {
    priceSort() {
      this.onerooms.sort(function(a, b){
        return a.price - b.price
      })
    },

 

priceSort 메서드를 만들고 onerooms 데이터를 sort 를 사용했다.

하지만 onerooms 데이터는 object 이기 때문에 안에 function(a, b) 를 넣어줬고.

javascript 의 sort 원리상 return a-b 가 음수이면 b 를 왼쪽으로 옮기는 구조인데,

이처럼 a.price 와 b.price 를 비교해서 정렬을 시켰다.

 

※ 하지만 sort 는 원본 데이터를 보존하지 않고 변형한다는 한계가 있다. 

최근 트랜드는 원본을 보존하는 방법을 많이 선택하기 때문에 추가로시도해보았다.

 

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

 

되돌리기 버튼을 만들고

  data() {
    return {
      onerooms_original: [...data],
      onerooms: data,
      user_clicked: 0,
      modal_status: false,
      menus: ['Home', 'Shop', 'About'],
      warn_count: [0, 0, 0, 0, 0, 0]
    }
  },

 

기존 데이터에 onerooms_original 로 원본을 따로 보관을 했다.

 

 2. spread operator

[...] 을 붙이지 않으면 그냥 하나의 data 를 다른 변수로 공유하는 의미이기 때문에

[...] 를 붙여서 별도의 사본으로 지정해줬다.

  methods: {
    priceSort() {
      this.onerooms.sort(function(a, b){
        return a.price - b.price
      })
    },
    sortBack() {
      this.onerooms = [...this.onerooms_original];
    }
  },

 

sortBack 메서드에 기존에 변경한 onerooms 변수에 onerooms_original 사본을 넣어서 버튼이 눌리면 원본 데이터로 복구시키도록 하였다.