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 반응형 상태변수에 또 설정해두면, 읽지 않은 메시지 수를 계산해서 유지하고 보여줄 수 있다.
암튼 세 줄 요약 하자면,
1. 이 로직을 사용해서 사용자가 로그인 할 때마다 이전 세션의 상태를 복원함.
2. 관련된 반응형 데이터 갱신함.
3. 이렇게 설정된 상태는 vue 반응형 시스템에 의해 관리되고 상태 변경 시 자동으로 UI에 반영됨.
