[Vue3] 04_Vue 인스턴스

04_vue 인스턴스

 

애플리케이션 인스턴스 : vue.createApp메서드를 호출하여 만들어진 객체

 

옵션 객체 : Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체 (name, data옵션)

 

루트 인스턴스 : DOM 트리에 마운트되어야 화면으로 렌더링 (vm)

---

 

1. Data 옵션

: 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용

 

관리와 추적 → 변경을 탐지하고 추적하여 화면을 갱신

 

반드시 객체를 리턴하는 함수로 부여되어야 함.

 

초기 문자를 사용할 때, 특수문자를 사용하면 안된다.

→ 특히, $로 시작하는 이름은 인스턴스 내부에서 특별한 용도이기 때문에 $,_로 시작하면 안됨.

2. 계산된 속성(Computed Property)

: data나 다른 속성이 변경될 때 함수가 실행되어(계산된) 저장된 캐싱된 값

 

함수의 실행은 의존하고 있는 속성 또는 data가 변경될 때 한 번 호출됨. → 값이 바뀌지 않으면 다시 계산하지 않는다.

 

computed는 함수를 등록하는데 여러 번 동일한 값을 렌더링하더라도 함수는 단 한 번만 호출됨.

computed 예제 실행결과

 

this.num값이 바뀌면 함수가 다시 호출되고 리턴값을 sum에 캐싱함.

따라서 바뀌지 않으면 한 번만 호출하여 불필요한 계산을 막음.

 

계산된 속성은 읽기전용이 아님. set 메소드를 지정하면 쓰기 작업도 가능.

하지만 보통은 기존 데이터를 이용해 읽기 전용의 값을 만들어내기 위해 자주 사용.

 

전통적인 함수일 때는 this를 사용해 컴포넌트 인스턴스에 접근할 수 있으나 화살표 함수일 경우 주의!

---

3. 메서드(Methods)

메서드는 실행하는 시점이 있는 것들을 등록

methods를 추가하고 내부에 함수들을 작성하여 사용.

 

메소드는 템플릿에서 호출 구문을 사용했기 때문에 렌더링 할 때만다 호출됨.

 

메소드는 계산된 속성과 달리 컴포넌트 인스턴스에 접근해야 할 때, 전통적인 자바스크립트 함수로 작성해야 함.

 

계산된 속성 vs. 메서드

• 이벤트 옵션을 사용하고 싶을 때는 method 속성을 사용.
• 계산된 속성을 사용하고 싶을 때 computed 속성을 사용. 데이터들이 변경되지 않으면 이전 값들을 보관하고 있음.
• 계산된 속성은 의존된 반응형을 기반으로 캐시된다는 점
• 메서드 호출은 리렌더링이 발생할 때마다 항상 함수를 실행

---

4. 관찰 속성(Watched Property)

긴 처리 시간이 필요한 비동기 처리에 적합함. → 계산된 속성은 값을 리턴하는 함수를 사용해야 하는데 동기식 처리만 지원함.

 

비동기 연산 = API 엑세스

 

지정된 변수를 계속 지켜보다가 값이 변경되었을 때 정의된 함수 실행

 

관찰 속성은 값을 리턴할 필요가 없음.

 

남용 시 단점 : data에 대한 의존 관계가 복잡해져서 코드의 실행 흐름을 분석하기가 어려워지고, 디버깅이 까다로움.

→ 메소드 + 이벤트 사용 권장

---

5. 생명주기 메서드

Vue 컴포넌트의 생명주기 : 컴포넌트가 생성된 후부터 컴포넌트가 앱 컴포넌트 트리에서 제거될 때까지의 흐름

 

실전 프로젝트 진행 시 복잡한 비동기 처리, 상태관리, 라우팅 기능 등이 사용 → 생명주기에 대한 이해가 필수!!

Vue 생명주기 (출처 : Vue 공식 문서)

 

생명주기 메서드	설명
beforeCreate	인스턴스가 방금 초기화 된 후 데이터 관찰 및 이벤트 / 감시자 설정 전에 동기적으로 호출
created	인스턴스가 작성된 후 동기적으로 호출. 이 메서드가 호출되기 직전에 데이터 관찰 기능, 계산된 속성, 메서드, 이벤트 초기화 등이 모두 완료됨.
beforeMount	마운트가 시작되기 바로 전에 호출. render 함수가 처음으로 호출됨.
mounted	Vue.createApp().mount()에 의해 컴포넌트 인스턴스가 HTML Document의 요소에 마운트된 후에 호출
beforeUpdate	데이터가 변경되고 DOM이 패치되기 전에 호출. 업데이트 전에 기존 DOM트리에 접근할 수 있음.
updated	데이터의 변경으로 가상 DOM이 다시 렌더링되고 패치된 후에 호출. 이미 DOM이 업데이트된 상태
beforeUnmount	컴포넌트 인스턴스가 언마운트(unmount)되기 직전에 호출됨. 이 시점에 인스턴스의 모든 기능을 사용할 수 있음.
unmounted	컴포넌트 인스턴스가 언마운트된 후에 호출. 이 시점에는 모든 디렉티브들의 연결이 해제됨.
errorCaptured	자식 컴포넌트에서 오류가 발생하면 컴포넌트 트리를 거슬러 올라와서 실행됨. 컴포넌트 자신에서 발생한 오류는 못잡음.

 

• 화면 초기화 : mounted에서 수행
• 화면과 관련되지 않은 외부 리소스 연결, 이벤트 초기화 : created
• 데이터나 속성이 변경되어 리렌더링(re-renderindg)이 일어난 후의 DOM의 기능을 작성 : updated
• created나 mounted에서 초기화된 외부 리소스의 연결과 같은 객체를 해제 : unmounted

생명주기 메소드는 컴포넌트 단위로 설정 가능

---

 

6. 생명주기 함수 활용

1. beforeCreate

로깅 시스템 초기화
애플리케이션 분석 도구 설정
전역 설정 값 초기화 전 준비 작업

2. created

API 데이터 요청 시작
전역 이벤트 리스너 등록
로컬 스토리지에서 사용자 설정 복원
타이머나 인터벌 설정
컴포넌트 초기 상태 계산

3. beforeMount

DOM에 접근하기 전 마지막 데이터 준비
서버사이드 렌더링과 클라이언트 렌더링 구분 처리
마운팅 직전 최종 데이터 검증

4. mounted

DOM 요소에 직접 접근하여 조작
외부 라이브러리 초기화 (차트, 지도 등)
스크롤 위치 복원
컴포넌트 가시성 감지(Intersection Observer)
자식 컴포넌트와의 통신 설정

5. beforeUpdate

업데이트 전 DOM 상태 저장
스크롤 위치 등 UI 상태 캡처
업데이트 성능 측정 시작
업데이트 전 데이터 검증

6. updated

데이터 변경 후 외부 라이브러리 업데이트
업데이트 후 DOM 요소 접근
업데이트 후 스크롤 위치 복원
조건부 렌더링된 자식 컴포넌트 초기화

7. beforeUnmount

이벤트 리스너 제거
타이머 및 인터벌 정리
WebSocket 연결 종료
사용자 활동 저장
외부 시스템과의 연결 정리

8. unmounted

차트 인스턴스 등 외부 라이브러리 인스턴스 정리
메모리 누수 방지를 위한 참조 해제
애플리케이션 상태 저장
최종 정리 작업 수행

이러한 생명주기 함수들을 적절히 활용하면 Vue 애플리케이션의 성능을 최적화하고, 메모리 누수를 방지하며, 사용자 경험을 향상시킬 수 있다!

---

7. 마무리

vue 생명주기는 매우 중요하다.

흐름을 잘 파악하고 있으면 프로젝트 진행 시에 기능을 만들고 언제 호출할건지 이해하기 쉽다. 

 

프로젝트 기간이 맞물려서 vue를 전부  정리할 시간이 없이 일주일 동안 개발을 하였다. 

추후에 프로젝트에서 내가 구현한 부분을 정리할 예정이다.

점점 숙제가 늘어나고 정리해야 할 게 산더미...인 느낌...ㅠ

몸이 10개면 좋겠다. 

아무튼 끝!!