[Vue/코딩애플/part1] 12. 상품 정렬 기능 / 데이터 원본 보존

📌 버튼 누르면 상품이 가격순으로 정렬되도록 하기

🔎 vue 는 {{데이터바인딩}}을 해 두면, 데이터가 변경 사항이 생길 시 HTML 에도 자동으로 실시간 반영되도록 한다.

즉, 데이터를 변경만 시키면 된다.

 

1. 정렬 버튼 만들기

<button>가격순 정렬</button>

 

 

버튼을 누르면 prodList 라는 상품데이터를 가격순으로 (낮은가격 -> 높은가격) 재정렬 시켜보자!

그러려면 일단 클릭 이벤트를 바인딩 해야 한다.

 

2. 클릭 이벤트 기능 부여

버튼을 클릭하면 priceSort 라는 함수가 실행되도록 하고

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

 

mothods: {} 에 priceSort 함수를 추가하자.

methods: {
    // [허위매물신고] 버튼 클릭 시 신고 수 증가
    increase(i) {
      // 함수 내용 입력
      this.count[i]++;
    },
    // 가격 정렬 기능
    priceSort() {
      
    }
  },

 

부동산 데이터를 prodList 라는 곳에 담았었다.

그러면 prodList 를 sort 하면 된다.

 

🔎 mothods 에서 prodList 라는 데이터에 접근하려면 this 를 쓰는 것을 잊지 말자. this 에 무엇이 있는 지 궁금하면 console.log(this) 로 찍어서 알아보는 습관을 가지자

 

sort()

array.sort()

 

오름차순으로 정렬 시켜 준다. 하지만 문자로 인식해서 가나다순으로 정렬된다고 생각하면 된다.

숫자 정렬을 하려면 다음과 같이 해야 한다.

 

// 오름차순 정렬 (1,2,3 ~)
array.sort(function(a,b) {
	return a - b;
})

// 내림차순 정렬(3,2,1 ~)
array.sort(function(a,b) {
	return b - a;
})

 

 

sort 를 활용하여 다음과 같이 작성하면 된다.

priceSort() {
  this.prodList.sort(function(a,b) {
    return a.price -b.price;
  });
}

 

 

하지만 여기서 문제가 생긴다.

Array 데이터 원본이 변형되어버린다. 

데이터 원본은 유지하면서 정렬 기능이 작동 되도록 기능 개발을 해야 한다.

 

📌 정렬 되돌리는 버튼 만들기

1. 되돌리기 버튼 만들기

<button @click="priceSort">가격순 정렬</button>
<button @click="sortBack">되돌리기</button>

 

2. methods 에 기능 추가

sortback 을 추가해준다.

methods: {
    // [허위매물신고] 버튼 클릭 시 신고 수 증가
    increase(i) {
      // 함수 내용 입력
      this.count[i]++;
    },
    // 가격 정렬 기능
    priceSort() {
      this.prodList.sort(function(a,b) {
        return a.price -b.price;
      });
    },
    // 되돌리기 버튼 클릭 시
    sortBack() {

    }
}

 

3. sortBack()에 되돌리기 기능 구현하기

사본을 만들어서 원본을 보존해야 한다.

 

현재 prodList 에 데이터 정보를 담고 있다.

같은 Array 를 바라보는 서로 다른 변수를 만들면 그 변수는 같은 Array 를 바라본다.

따라서 단순히

prodList_2 = prodList;

로 코드를 작성하게 되면 

prodList_2 를 변경하면 prodList 도 같이 변경되게 된다.

 

🔎 이에 대한 자세한 내용은 referenct data type 검색해보기

 

array 자료를 복사하고 싶을 땐

[...array] 를 활용하면 된다.

 

🔎 [...array] : 점 3개 문법, spread operator 라고 한다.

 

[...array] : spread operator

array 복사본을 만들고 싶을 때 활용한다.

array 나 object 앞에 붙일 수 있다.

 

array, object의 괄호를 제거해주는 문법이다.

...[1,2,3] 이런식으로 쓰면 1,2,3 만 남는 다는 뜻이다.

 

1,2,3 만 남은 것에 다시 [] 를 씌우니 값이 똑같은 array 가 재탄생한다.

... 로 괄호를 벗겼다가 다시 씌운다! 라고 이해하면 된다. (일종의 편법)

 

더 자세히 알고 싶다면 reference data type 을 검색하면 된다.

 

---

 

다시 돌아와서, 

되돌리기 기능을 구현하기 위해 spread operator 를 활용해보자.

 

데이터 보관함에 데이터 원본을 따로 저장한다.

 

 data() {
    return {
      menu : ['Home', 'Shop', 'About'],
      count : [], // 신고 수
      isModal : false,
      originProdList : [...prodList], // 부동산 데이터 원본
      prodList : [...prodList], // 부동산 데이터들
      prodId : 0, // 상품 id
    }
  }

 

originProdList 를 새로 생성해주었다. (원본 보관용)

 

이제 sortBack() 함수의 내용을 채울 수 있다.

// 되돌리기 버튼 클릭 시
sortBack() {
  this.prodList = [...this.originProdList];
}