Vue 자바스크립트 기반의 프레임워크
Vue.js(뷰 제이에스)는 자바스크립트 기반의 프론트엔드 프레임워크로, 사용자 인터페이스를 구축하기 위한 라이브러리입니다. 다른 프레임워크와 비교했을 때 가볍고 진입 장벽이 낮으며, 쉬운 문법과 뛰어난 성능으로 개발자들 사이에서 인기를 얻고 있다.
주요 특징:
- 바인딩 (Data Binding):
- Vue.js는 데이터와 화면 요소 간의 양방향 데이터 바인딩을 지원합니다. 이는 모델과 뷰 간의 동기화를 쉽게 유지할 수 있도록 도와준다
- 컴포넌트 기반 구조:
- Vue.js는 컴포넌트 기반 아키텍처를 채택하고 있습니다. 이는 애플리케이션을 작은 단위로 나누어 각각을 재사용 가능한 컴포넌트로 구성함으로써 유지보수성을 높이고 코드의 가독성을 향상시긴다.
- 가상 돔 (Virtual DOM):
- Vue.js는 가상 돔을 활용하여 실제 DOM 조작을 최소화하고 성능을 향상시킵니다. 변경된 부분만을 실제 DOM에 적용하여 불필요한 렌더링을 방지한다.
- 디렉티브 (Directives):
- Vue 디렉티브는 v- 접두어를 가진 특수 속성으로, HTML에서 사용자 정의 속성처럼 사용됩니다. 예를 들어, v-if, v-for, v-bind, v-on 등이 있다.
- 이벤트 핸들링 및 메소드:
- Vue에서는 v-on 디렉티브를 통해 이벤트 핸들링을 지원하며, 메소드를 정의하여 이벤트에 대한 로직을 처리할 수 있다.
- 라우팅 (Vue Router):
- Vue Router를 이용하여 SPA(Single Page Application)를 쉽게 구현할 수 있습니다. 라우터를 사용하면 페이지 간의 전환과 브라우저 히스토리를 관리할 수 있다.
- 상태 관리 (Vuex):
- 대규모 애플리케이션에서 상태 관리를 위한 Vuex를 제공합니다. 중앙 집중식 상태 관리 패턴을 사용하여 애플리케이션의 상태를 효과적으로 관리한다.
- 라이프사이클 훅:
- Vue 인스턴스의 라이프사이클에 특정 로직을 실행할 수 있는 훅을 제공하여 애플리케이션의 특정 시점에 작업을 수행할 수 있다.
최근 회사에서는 react 로 작업중에서 느낀점이지만 vue 는 좀더 가독성이 높고 간결한 코드를 작성하기에 최적화 되어있다고 생각이 들었다. 프레임워크로 리액트는 라이브러리를 추가하여 리덕스 zustand 를 사용하여 상태관리를 하는 방면 vue 는 따로 store 관리를 라이브러리 설치를 하지 않고도 진행 할 수 있는 점이 가장 큰 장점으로 다가왔다.
라이프 사이클또한
위에처럼 여러가지로 생명주기 훅으로 사용한다. 리액트에서는 useEffect 로 동기화 작업을 한다면 vue 는 라이프 사이클로 전반적인 동기화 작업을 진행시킨다. 의존성을 주입해서 감시하는 useEffect 와 차이점으로는 감시자는 watch 라는 감시자가 있는데 리액트와 다른 강점을 가지고 있다. 하지만 watch 는 주의해야할점이 있다. 명령형 프로그래밍 방식이므로
computed 속성을 사용해야하는경우는 구분하여 사용해야한다. 선언형 프로그래밍 방식인 컴퓨티트는 computed 속성은 종속 대상을 따라 저장하며 캐싱처리를 하기떄문에 구분하여 사용 한다.
vue3
vue3가 도입되면서 달라진 점이 있다.
2022년 1월에 새로 도입된 vue3는
1. 성능 향상
[가상 DOM 최적화]
기존 Vue 렌더링의 가상 DOM 설계는 HTML 기반 템플릿을 제공하고 이를 가상 DOM Tree로 반환한 후 실제 DOM의 어떤 영역이 업데이트되어야 하는지 재귀적으로 탐색하는 방식이었다. 그렇기에, 매 변경을 파악하기 위해 모든 트리를 확인하는 비효율성이 존재했다.
- 템플릿 구문에서 정적 요소와 동적 요소를 구분, 트리를 순환할 떄 동적 요소만 순환해서 탐색의 최적화를 반영했다.
- 렌더링 관련 객체(템플릿 내 정적 요소, 서브 트리, 데이터 객체) 등을 컴파일러가 탐지해 Renderer 함수 밖으로 호이스팅시켜 객체의 복수 생성을 방지한다.
- 컴파일러가 템플릿 내 동적 바인딩 요소에 플래그를 생성한다. 이를 통해 렌더링 속도를 향상시켰다.
[트리쉐이킹 강화]
트리 쉐이킹(Tree Shaking)이란 나무를 흔들어 잎을 떨어트리듯 모듈을 번들링하는 과정에서 사용하지 않는 코드를 제거하여 사이즈를 줄이는 최적화 방안을 의미한다.
Vue3는 컴파일러가 실제 사용하는 코드만 import하며, v-model과 같은 양방향 바인딩에서 트리 쉐이킹을 적용하여 번들 크기를 절반 이상으로 줄인다.
2. Composition API
Vue3의 가장 큰 특징이라고 할 수 있는 Composition API가 등장함에 따라, 함수형 프로그래밍 기반의 코드 템플릿의 변화가 일어났다.
여기서는 대표적으로 바뀐 부분들만 짚고, 자세한 내용은 별도로 정리한 포스팅을 참고해주기를 바란다!
- setup() 메서드 : 기존 컴포넌트 옵션들을 setup() 메서드 내에 선언 및 반환한다. 데이터에 반응형을 부여하는 ref() 및 reactive(), 기존의 computed(), watch() 모두 API 메서드들로 대체되었다.
- props : this 바인딩을 하던 방식에서, setup() 의 첫번째 인자로 받아 내부에서 활용할 수 있다.
- emit : this 바인딩을 하던 방식에서, setup() 의 두번째 인자인 context에 포함되어있다.
- Lifecycle Hooks : beforeCreate, created 가 setup() 으로 대체된다. 또, hooks 앞에 on들이 붙었으며, destroy는 unmount로 변경되었다.
이러한 컴포지션 API를 통해 코드의 가독성 향상, 재사용성의 개선, Typescript 타입 추론 등의 지원이 가능해졌다.
3. Fragment
Vue2 에서는 <template> 내에 단일 태그로 랩핑을 필수적으로 해야 했다. (Vue 인스턴스를 단일 DOM 요소로 바인딩했어야함)
하지만, Vue3 는 <Fragment> 태그를 지원하며, 이를 통해 다중루트 노드(multiple root node)를 작성할 수 있게 되었다. (Fragment는 DOM 트리에 그려지지 않음)
<!-- Vue2 -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
<!-- Vue3 -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
4. Teleport
React의 Portals(포털)과 유사한 기능으로, 모달이나 알림 등과 같이 특정 컴포넌트가 부모에 상속되어 있으면서도 렌더링되는 위치는 제 2의 루트(영역)인게 유리한 경우 Teleport 기능이 유용하다.
이를 통해, 기존에 CSS로 조정하거나 인위적으로 엘리먼트를 주입하던 방식에서, <teleport> 태그 내부의 HTML 요소를 특정 태그로 옮겨 렌더링할 수 있게 되었다.
// Modal.vue
<teleport to="#deleteModal">
<Modal v-show="showModal" @delete="deleteTodo" @close="closeModal"></Modal>
</teleport>
위 예시와 같이, 다른 곳에 렌더링할 요소를 <teleport> 태그로 감싸고, to 속성에 렌더링할 위치의 id(혹은 class)명을 설정한다.
// index.html
<body>
<div id="app"></div>
<div id="deleteModal"></div>
</body>
다음과 같이, Teleport의 타겟이었던 #deleteModal 내에 엘리먼트가 렌더링되는 걸 볼 수 있다.
확실히 Composition API가 Vue3의 가장 큰 변경점이다. 이외엔, Teleport, Suspense 와 같이 부가기능 컴포넌트들이 주를 이루었다.
다만, 가상DOM 트리를 개선한 부분이 기존 Vue2는 어땠고, Vue3는 어떻게 개선되었는지 한번쯤 짚고 넘어갈 것을 권장한다.
'vue > csr,vue' 카테고리의 다른 글
| 로컬 PC _ AI 코어 장비와 통신 시 리소스 자원 관리와 성능 최적화 (0) | 2024.09.10 |
|---|---|
| 오픈시드래곤 사용 - 타일화 & 캔버스 위에 좌표 값에 따른 사각형 표시 (0) | 2024.08.27 |
| Vue 3 Composition API: 간결하고 효율적인 상태 관리 (0) | 2023.12.08 |
| Vue 뒤로가기했을때 재렌더링 하기 에러일지 (0) | 2023.01.13 |
| vue를 이용한 파이어베이스를 fcm을 이용한 전화 수신 시 알림 창, 모달 창 띄우기 (2) | 2022.12.27 |