Jae Front-end Study

목표

• sort 메서드를 이용해 toDoList 정렬하기
• v-bind를 이용해 class 바인딩하기

결과 화면

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

0. 정렬 함수 하나로 만들기 (23.12.27 추가)

• pages/index.vue

중복된 코드가 많고, 토글 형태로 isActive 변수를 만들어 등록순을 클릭하고 또 등록순을 클릭하면 최신순으로 변경되는 오류가 발생해 코드를 수정했다.

1. sortToDo() 함수를 만든다.
2. compareFn 매개변수를 만들어 @click 이벤트에서 받아온다. Nuxt3은 타입스크립트 기반이기 때문에 타입을 작성한다.
3. data.value는 axios에서 받아오는 toDoData이다. 객체 형태이기 때문에 전개연산자를 사용했지만, 배열이라면 바로 sort 메서드를 사용한다.
4. @click 이벤트에서 isActive를 true/false로 바꿔 class를 바인딩한다.

<script setup lang="ts">
...

interface IToDo {
  id: number
  todo: string
  created_at: Date
}

function sortToDo(compareFn: (a: IToDo, b: IToDo) => number) {
  toDoData.value = [...data.value].sort(compareFn)
}
</script>

<template>
    <section>
    	...
    
        <div v-if="toDoData.length > 0">
            <div class="flex gap-2 mb-6">
                <button
                    :class="{ 'underline underline-offset-4': isActive }"
                    @click="() => {
                    isActive = true
                    sortToDo((a, b) => a.id - b.id)}">
                    등록순
                </button>
                <i>|</i>
                <button
                    :class="{ 'underline underline-offset-4': !isActive }"
                    @click="() => {
                    isActive = false
                    sortToDo((a, b) => b.id - a.id)}">
                    최신순
                </button>
            </div>
        </div>
        
        ...
    </section>
</template>

1. 등록순/최신순 정렬 함수 만들기

• pages/index.vue

1. sort 메서드로 toDoList의 id를 비교해 등록순/최신순 정렬 함수를 만든다.
2. <button> 태그에 @click 이벤트를 걸어준다.

<script setup lang="ts">
...

function sortRegistered() {
  toDo.toDoList.sort((a, b) => a.id - b.id)
}

function sortLatest() {
  toDo.toDoList.sort((a, b) => b.id - a.id)
}
</script>

<template>
  <section class="w-full max-w-screen-lg m-auto">
    ...
  
    <div v-if="toDo.toDoList.length > 0">
      <div class="flex gap-2">
        <button @click="sortRegistered()">등록순</button>
        <i>|</i>
        <button @click="sortLatest()">최신순</button>
      </div>
      
      ...
    </div>
  </section>
</template>

2. v-bind로 class 바인딩하기

• pages/index.vue

1. isActive 변수를 Boolean으로 만든다. (등록순/최신순 버튼에 on/off 효과를 주기 위해서)
2. sort 함수가 동작할 때마다 isActive 변수가 true/false 될 수 있게 만든다.
3. v-bind( : )를 이용해 클래스를 바인딩한다. (1개의 클래스만 바인딩하며 ''이 없어도 되지만, 여러 개 클래스를 바인딩할 경우 '' 안에 작성한다.)

<script setup lang="ts">
...

let isActive = true

function sortRegistered() {
  toDo.toDoList.sort((a, b) => a.id - b.id)
  isActive = !isActive
}

function sortLatest() {
  toDo.toDoList.sort((a, b) => b.id - a.id)
  isActive = !isActive
}
</script>

<template>
  <section class="w-full max-w-screen-lg m-auto">
    ...
    
    <div v-if="toDo.toDoList.length > 0">
      <div class="flex gap-2">
        <button
          :class="{ 'underline underline-offset-4' : isActive }"
          @click="sortRegistered()">등록순</button>
        <i>|</i>
        <button
          :class="{ 'underline underline-offset-4' : !isActive }"
          @click="sortLatest()">최신순</button>
      </div>
      
      ...
    </div>
  </section>
</template>