[vue3] Lifecycle -> onMounted() 에 대해 알아보자 !

Front-end

[vue3] Lifecycle -> onMounted() 에 대해 알아보자 !

eujin 2024. 6. 16. 18:01

안녕하세요. 윾진입니다. 너무 덥네요.
생명에 지장이 올 것 같은 더위입니다.
그런 의미로 오늘은 생명주기와 그 중 onMounted 훅에 대해 살펴봅시다.
몇번 뵀으니 이제 반모로 갑니다. 댓글도 반모로 쓰세요. (반말모드 라는 뜻 ㅋㅋ)

Lifecycle Hooks

각 vue 컴포넌트 인스턴스는 생성될 때 초기화 단계를 거친다.
생명주기 순서를 간략하게 설명하자면 , 다음과 같다.

vue2 와 vu3 의 차이는 위와 같다.

reactive의 주요 특징

객체 기반 반응형 상태 관리: reactive는 주로 객체 상태를 반응형으로 만들 때 사용한다.
자동 추적 및 업데이트: reactive로 만든 상태는 Vue의 반응형 시스템에 의해 자동으로 추적되고, 관련 DOM이나 컴포넌트가 자동으로 업데이트된다.
직관적: reactive로 생성된 상태는 일반 JavaScript 객체처럼 사용할 수 있다.

vue3의 reactive는 상태 관리와 로직 분리를 용이하게 해서 코드의 가독성과 유지보수성을 높여준다.

OnMounted 훅

여기서 이제 OnMounted()는 컴포넌트가DOM에 추가된 후 호출되는 것이다.
컴포넌트의 초기 렌더링이 완료된 후에
실행할 코드(DOM 조작, 타이머 시작, 네트워크 요청)를 실행할 때 사용된다.
DOM 조작이나 초기화, API 호출 등 컴포넌트가 DOM에 존재해야 하는 작업을 수행하는 것이 목적이다.
vue2 에서는 mounted 훅이 비슷한 역할을 해줬고, 지금 vue3 에서는 OnMounted 훅이 대신하고 있다.

아래 예제코드를 살펴보자 !

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('Hello, Vue 3!');

onMounted(() => {
  console.log('컴포넌트가 마운트되었습니다!');
  // 초기화나 DOM 조작을 수행
});
</script>

onMounted를 가져옴 :vue 라이브러리에서 onMounted를 가져온다.
반응형 변수 정의: ref 함수를 사용하여 반응형 변수 message를 정의한다.
onMounted 훅 설정: onMounted 훅 내부에서 콘솔 로그를 찍는다. 이 코드는 컴포넌트가 DOM에 추가된 후에 실행된다.

그럼 지금 프로젝트에서의 코드 살펴보자 !

onMounted(() => {
  if (localStorage.getItem('isLoggedIn') === 'true') {
    isLoggedIn.value = true;
    userName.value = localStorage.getItem('userName') || '';
    selectedLocation.value = localStorage.getItem('location'); // 희망 지역 복원
    // 로그인 상태일 때 알림 데이터 복원
    notifications.value = [
      // 알림 데이터 복원
    ];
    unreadMessages.value = notifications.value.filter(n => !n.read).length;
  }
});

사용자가 로그인 된 상태인지를 판별하고,
로그인 되었으면 사용자가 선택한 희망 지역 상태를 복원해서 이전에 설정한 정보를 계속 유지되게 한다.
그리고 notification 반응형 상태 변수애도 알림 데이터를 복원한다.
로그인되면, 이전 알림들을 복원할 수 있다.(알림 관련 코드는 지우고 주석처리해둠.)
그리고 read 속성이 false 인 항목 갯수를 세서 unreadMessages 반응형 상태변수에 또 설정해두면, 읽지 않은 메시지 수를 계산해서 유지하고 보여줄 수 있다.

암튼 세 줄 요약 하자면,

이 로직을 사용해서 사용자가 로그인 할 때마다 이전 세션의 상태를 복원함.
관련된 반응형 데이터 갱신함.
이렇게 설정된 상태는 vue 반응형 시스템에 의해 관리되고 상태 변경 시 자동으로 UI에 반영됨.