[Vue] 정렬 기능(sort)과 데이터 원본 보존

원룸의 가격순대로 데이터를 정렬해보자.

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

--> 먼저 클릭하면 가격순으로 정렬되는 버튼을 하나 만들어보자.

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

--> 그리고 정렬하는 함수를 생성한다.

 

    priceSort() {

      var array = [3,5,2];

      array.sort(function(a,b){

        return a-b

      });

    }

--> 정렬을 하기 앞서 잠깐 sort() 문법을 정리해보자. sort()는 말 그대로 정렬해주는 함수이다.

그런데 여기서 3,5,2는 숫자가 아닌 문자로 인식이 되기 때문에 숫자로 정렬을 하려면 위와 같이 function을 사용해야한다.

sort 안에서 위 코드는 'a-b가 음수면 a를 앞에 놔주세요' 라고 인식한다.

 

다시 돌아가서

    priceSort() {

      this.원룸들.sort(function(a,b) {

        return a.price - b.price

      })

    }

--> 원룸들의 데이터중 price를 선택하여 위에서처럼 코드를 적용하면 정렬이 완성된다.

 

이번엔 정렬했던 것을 되돌리는 기능을 만들어보자.

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

--> 먼저 되돌리기 버튼과 함수 이름을 만들어준다.

여기서 잠깐, sort() 함수는 원본을 변형시키는 함수이다. 
요즘 코딩에서는 원본 데이터를 보존하는 것이 보통이다.
따라서 원본 데이터를 만들어보자.

  data() {

    return {

      원룸들오리지널 : data,

      오브젝트 : { name:'kim' , age:20 },

      누름 : 0,

      원룸들 : data,

      modalOpen : false,

      신고수 : [0,0,0],

      메뉴들 : ['Home', 'Shop', 'About'],

      products : ['역삼동원룸', '천호동원룸', '마포구원룸']

    }

  },

--> '원룸들오리지널' 이라는 데이터를 만들고 원름들과 마찬가지로 data를 넣었다. 이렇게 하면 된 것일까?

정답은 NO ! 위 방법은 데이터 사본이 생기는게 아니라 둘을 같은 array로 인식한다.

따라서 별개의 사본을 만드려면

 

  data() {

    return {

      원룸들오리지널 : [...data],

      오브젝트 : { name:'kim' , age:20 },

      누름 : 0,

      원룸들 : data,

      modalOpen : false,

      신고수 : [0,0,0],

      메뉴들 : ['Home', 'Shop', 'About'],

      products : ['역삼동원룸', '천호동원룸', '마포구원룸']

    }

  },

--> [...data] 이렇게 spread operator 라는 문법을 사용한다.

위 문법은 array나 object 앞에 붙일 수 있으며 array, object의 괄호를 제거해주는 문법이다.

[1,2,3]이 1,2,3이 된다는 소리!

array를 복사할 때 spread operator로 괄호를 벗겼다가 다시 씌우면 값 공유 현상이 일어나지 않게 복사할 수 있다.

array를 해체했다가 다시 array로 만들면 서로 값을 공유하지 않는 별개의 사본을 만들 수 있어서 이렇게 사용한다. (일종의 편법)

이제 함수로 가서 오리지널 데이터를 원룸들 데이터에 넣어주는 코드만 짜면 되는데,

    sortBack() {

      this.원룸들 = [...this.원룸들오리지널];

    }

--> array에서 = 는 오른쪽 값과 왼쪽 값을 공유해주세요. 라는 의미이기 때문에 위와 마찬가지로 [...] 문법을 사용하여 복사본을 생성한 뒤 넣어주어야 정렬-되돌리기가 정상 작동한다.

이렇게 하면 가격순 정렬 / 원래대로 되돌리기 완성!

 

출처 : 코딩애플