천소희

기록하는 개발자

업데이트:

카테고리:

/

태그:

Toast

저장이 되었거나 오류가 있으면 상단에 창이 뜨도록 함 ⇒ toast 이라고 한다

//toast components

<template>
  <div class="alert  alert-success toast-box" role="alert">
    
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }

}
</script>

// 수정 페이지
<template>
	<ToastAlert v-if="showToast" :message="toastMessage"/>
</template>

export default {
  components: {
    ToastAlert
  },
  setup() {
    const showToast = ref(false)
    const toastMessage = ref('')

		const tiggerToast = (message) => {
      showToast.value = true
      toastMessage.value = message
    }

    const onSave = async () => {
      const res = await axios.put('http://localhost:3000/todos/' + todoId, {
        subject: todo.value.subject,
        completed: todo.value.completed
      })

      // 갱신
      originalTodo.value = {...res.data}
      tiggerToast('SuccessFully saved!')
    }
}

v-if로 보이지 않게 했다가 알림창을 띄워줘야할 떄 ture로 변환하여 해당 창을 보이게 한다.

해당 창을 일정시간만 띄우고 없애고 싶다면? ⇒ setTimeOut(() => {},시간(ms))

위의 함수는 중괄호 안에 있는 값을 일정 시간이 지나고나서 실행을 하기 때문에 알림창 같은 일정시간을 띄우고 자동으로 없어지는 것에 사용하기 매우 좋다

Vue Compoent Lifecycle

setup() 함수 안에서 OnMount(() ⇒ {}) 해당 형식처럼 사용

  • onBeforeMount : 돔에 마운트 되기전에 실행
    • template에 있는 컴포넌트를 선택하면 null 이 뜬다.
  • onMounted : 돔에 마운트가 되고나서 실행
    • template에 있는 컴포넌트를 선택하면 해당 선택자가 출력된다.
  • onBeforeUpdate : 상태가 업데이트 되기 전에 실행
  • onUpdated : 상태가 업데이트 되고나서 실행
  • onBeforeUnmount : 다른 페이지로 이동하기 전에 실행, 돔에 마운트된 요소들을 제거하기 전에 실행된다.
  • onUnmounted : 다른페이지로 이동하고 나서 실행

메모리 누수

Unmount 가 되서도 setTimeout에 있는 함수는 실행이 된다. 여기서 메모리 잡아먹어 메모리 누수가 발생한다.

onUnmounted(() => {
      clearTimeout(timeout.value)
    })

timeout.value = setTimeout(() => {
        toastMessage.value = false
        toastMessage.value = ''
        toastAlertType.value = ''
      },3000)

해당 함수를 Unmount 가 되었을 때 clearTimeout 을 이용 해당 함수를 중지시키면 된다.

Unmounted는 메모리 누수에 효과적으로 활용할 수 있다.

코드 재사용

코드를 작성하다 보면 같은 부분이 반복되는 경우가 존재 코드를 좀 더 간결하게 사용하기 위해 파일로서 사용

  1. src 하위 폴더로 composables / hooks 로 폴더 생성 - 해당기능.js 파일 생성

     import { ref, onUnmounted } from 'vue'
    
 export const useToast = () => {
   const showToast = ref(false)
   const toastMessage = ref('')
   const toastAlertType = ref('')
   const toastTimeOut = ref(null)
    
   const tiggerToast = (message,type = 'success') => {
     showToast.value = true
     toastMessage.value = message
     toastAlertType.value = type
     toastTimeOut.value = setTimeout(() => {
       toastMessage.value = false
       toastMessage.value = ''
       toastAlertType.value = ''
     },3000)
    
     onUnmounted(() => {
       clearTimeout(toastTimeOut.value)
     })
   }
    
   return {
     toastMessage,
     toastAlertType,
     showToast,
     tiggerToast
   }
 }

  2. 원하는 기능을 export const 변수이름 = () ⇒ {} 에 저장후 밖에서 사용할 변수를 return에 포함시킨다.

  3. 사용할 컴포넌트에 아래와 같이 코드를 작성한다.

     import { useToast } from '@/composables/toast'
    
 const {
       toastMessage,
       toastAlertType,
       showToast,
       tiggerToast
     } = useToast()

    return에 있는 변수와 함수를 안에 작성하고 그것을 useToast() 에 담는다.

참고