티스토리 뷰
개발을 하면서 느낀 2.x버전과 3.x버전의 가장 큰 차이점은 다음과 같다.
(당연히 3.x버전이 최신이기 때문에, '프론트엔드는 최신 기술이 무조건 좋으니까 Vue3 버전을 사용해야지'하고 생각했다가 낭패를 볼 수 있다.)
- Composition API
- 성능 개선
- Multiple Root
- 엄격한 UI 컴포넌트 컨트롤
- 라이브러리, 모듈 적용
1. Composition API
Vue2에서는 Options API를 사용한다. Options API는 개발자로 하여금 코드의 직관성, 가독성을 높이지만 프로젝트의 규모가 커지게 되면 유지보수가 어려워진다는 단점이 있다. 이를 보완하기 위해 Vue3에서는 Composition API를 사용한다.
Composition API를 사용하게 되면
- 코드 복잡성 완화
- 모든 코드를 독립적으로 정의한다.
- 각 기능을 함수로 묶어 처리하기 때문에 특정 기능의 유지보수를 위해 해당 함수만 확인한다.
2.코드 재사용성 향상
- 인스턴스의 특정 기능 단위로 모듈화된 로직을 여러 컴포넌트에서 재사용할 수 있게 된다.
3.타입스크립트 지원
- 내부의 setup() 함수에서 자동으로 타입을 추론한다.
2. 성능 개선
Vue3 공식 페이지에 의하면 아래의 방법을 통해 성능을 개선했다고 한다.
- 가상 DOM 최적화
- 템플릿 구문에서 정적 요소와 동적 요소를 구분하여 트리를 순환할 때 동적 요소만 순환할 수 있도록 한다.
2.트리쉐이킹 강화
- 모듈을 번들링하는 과정에서 사용하지 않는 코드를 제거하여 파일 크기를 줄인다.
번들 크기가 최대 41% 감소
초기 렌더링 최대 55% 향상
메모리 사용량은 최대 33% 감소
3. Multiple Root
Vue2는 컴포넌트(.vue) 파일에서는
<templete>
<div>
// 태그 하나가 메인으로 있고
// 그 안에 다른 태그들을 넣어야 함
</div>
</templete>처럼 한 개의 메인 Root tag로 다른 태그들을 감싸서 구성으로 해야 한다. 하지만 Vue3는 컴포넌트(.vue) 파일에서는
<templete>
<div>
// 메인 태그 하나가 아니라
</div>
<div>
// 여러개 태그로 감싸도 됌
</div>
</templete>여러 개의 메인 Root tag를 허용한다. 별거 아닌 것처럼 보이지만 개발을 하다보면 Vue2에서 한 개의 Root만 써야할 때 불편함을 느낄 때가 종종 있다.
4. 엄격한 UI 컴포넌트 컨트롤
javascript에서 타입을 추가해서 사용하는 typescript를 사용하는 이유는 타입을 추가함으로써 런타임에 발생할 수 있는 에러를 방지하기 위함이다.
타입을 추가한다는 것은 '엄격하게' 관리를 하기 위한 것인데, Vue2에 비해 Vue3는 보다 엄격하게 UI를 컨트롤한다. 예를 들어 특정 UI를 반복해서 보여주고 싶을 때 쓰이는 v-for를 보자.
Vue2는 아래처럼 v-for 와 v-if를 같은 태그 안에서 같이 쓸수 있다.
<templete>
<div v-for v-if>
// 에러 발생 x
</div>
</templete>하지만 Vue3는 아래처럼 v-for 와 v-if를 같은 태그 안에서 쓰면 에러가 발생한다. (예기치 못한 에러를 방지하기 위해)
<templete>
<div v-for v-if>
// 에러 발생
</div>
</templete>
5. 라이브러리, 모듈 적용
위에서 설명한 대로 보면 당연히 Vue3를 선택하는게 당연해 보이지만, Vue3 가 만들어진지 얼마 안 되어서인지 특정 라이브러리나 모듈이 Vue3 에서는 사용하기 어려운 점이 많아서 Vue2 라이브러리, 모듈을 Vue3 용으로 마이그레이션 하는 과정이 필요하다. (마이그레이션 쉽지 않다.) 사용을 못 하는건 아니지만 꽤나 노력이 필요한 과정이기 때문에, 단 기간 내에 안정성 있게 서비스를 해야 되는 상황이라면 Vue2 사용하는 것을 추천한다.
'Web Framework' 카테고리의 다른 글
| Vue 시작하기 (0) | 2022.06.25 |
|---|