Vue3 변경점을 정리해보자 1탄 (기본)

DAYEON CHOI·2022년 5월 24일
0

Vue

목록 보기
1/1
post-thumbnail

요약

  • Composition API가 들어오면서 데이터 선언, 함수 선언, 상태 관리 등의 변화
  • 컴포넌트 내에서 데이터, 함수, 상태를 호출하는 방식도 변화
  • 없던 종류의 컴포넌트, 내부적인 성능 향상을 위한 변화

변화 요약

요기 ✔️가 이번 게시글에서 다룰 내용!!

  • Composition API (→ 기본적으로 영향을 미치는 변경점!) ✔️
  • 템플릿 생성 방식의 변화 ✔️
  • data, method 작성 방식의 변화 ✔️
  • Lifecycle hook 호출의 변화 ✔️
  • computed 속성 사용 방법의 변화 ✔️
  • props와 this 바인딩의 분리 ✔️
  • emit과 this 바인딩의 분리
  • Suspended Component
  • Fragment
  • Portal
  • 내부적인 변화
  • 그 외..

사전 지식

Composition API란?

컴포넌트 내 특정 기능의 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API

배경

  • Vue는 프로젝트 규모가 커질 수록 관리하기 힘들다는 단점이 있어 이를 보완하기 위해 생김
  • 컴포넌트의 계층구조가 복잡할수록 코드에 대한 추적 및 관리의 어려움 등..

쓰윽-

  • 얼핏 보면 리액트의 Hooks와 매우 유사한 느낌
  • 목적에 맞는 코드를 모듈화하여 기존의 단점을 보완할 수 있으며 더 유연하고 안전한 확장 가능
  • beforeCreate, created… → “setup”

목적 & 정리

  • API라는 이름을 붙인 것처럼, 특정 기능을 갖는 함수를 정의하고 API처럼 사용할 수 있게 해주는 것
  • 코드에 대한 재활용성을 높이고, 코드의 가독성을 높이기 위해 사용

템플릿 생성 방식의 변화

여러개의 루트 엘리먼트

  • vue2의 템플릿은 하나의 루트 엘리먼트만 허용했지만, Vue3부터는 여러개의 루트 엘리먼트를 갖는 컴포넌트를 지원
  • ⇒ 불필요한 감싸주기 용의 wrapper div가 없어도 될 것으로 보임!
  • 하지만 언제나 그렇듯, 여러개의 루트 엘리먼트 사용을 권장하지는 않음! (BEM 하의 원활한 스타일링 고려)
<template>
	<div class="input-label">
		{{inputLabel}}
	</div>
	<input type="text"/>
</template>

템플릿에서의 호출 방식

  • 기존에는 props나 method 등을 구분없이 이름만으로 호출할 수 있었는데, 이제는 문맥상으로 이들을 조금 분리하는 것이 가능해짐
  • 이 호출 방식에 대한 변화는 사실 템플릿의 변화라기 보다는 props, data, method를 다루는 방식의 변화와 연관! 후에 나옵니다!!
<template>
	<div>
		<div class="input-label">
			<!--{{inputLabel}}-->
			{{state.inputLabe}}
		</div>
		<input type="text"/>
	</div>
</template>

data, method 작성 방식의 변화

  • 코드 측면에서의 가장 큰 변화!
  • method 선언이 전부 setup이라는 메소드 안으로 편입
  • 대부분의 도큐먼트에서 사용하는 기본적인 예시는 Options API 방식
// Vue2.x → props, data, methods가 같은 계층에 존재

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // login method
    }
  }
}
// Vue 3.x 
// → props와 setup이 같은 계층에 존재, data는 state로, 
// method들은 각각의 기명함수로 작성되어 한번에 반환되도록 변화

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    const login = () => {
      // login method
    }
    return { 
      login,
      state
    }
  }
}
  • vue 3.x setup 이렇게도 적용해요! (script 사용, 개인적으로 더 선호)
// vue 3.x

<script setup lang="ts">
import { definedProps, reactive }

const props = defineProps<{
	fiterKeys: string[];
}>();

const state = reactive(() => {
	username: string;
	password: string;
});

const login = () => {
	// login method
}
</script>

state의 경우에도 그냥 선언이 아닌, vue reactive 사용 가능

  • vue reactive - 반응형, vue가 반응형 시스템을 유지하기 위해 사용하는 간단한 JS 객체
  • getter / setter
    • Vue 종속성 추적 및 변경 알림 수행 가능
    • 사용자에게는 보이지 않지만, 개발자가 속성에 엑세스 하거나 수정할 때 사용
    • (변환된 데이터 객체 기록 시 브라우저의 getter/setter 형식 처리 방식이 다르므로 vue-devtools 설치 권장)
  • watcher
    • 모든 컴포넌트 인스턴스는 해당 watcher 인스턴스가 있으며, 컴포넌트가 종속적으로 렌더링 되는 동안 수정된 모든 속성 기록
    • 나중에 종속적인 setter가 트리거되면 watcher에게 알리고 컴포넌트가 다시 렌더링 되는 방식

Lifecycle hook 호출의 변화

  • data, method와 같은 hierarchy(계층)에서 선언 → setup 내부에서 선언
  • 이때 state나 method들과는 달리 Lifecycle hook은 return할 필요가 없음
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
    
export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
			// ... 
    })
  }
}

Computed 속성 사용의 변화

  • computed 속성은 이제 별도 옵션이 아닌, state 선언문 내에 computed 속성에 대한 선언 문구를 추가하는 방식으로 변경됨
  • 사용하는 것만 import해 사용하도록 하고자 하는 철학이 담김
  • = computed나 lifecycle hook 등 다양한 옵션들을 함수 형태로 동작하도록 변경
// vue2

export default {
  // .. 
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  }
}
// vue3

import { reactive, computed } from 'vue'
    
export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    // ...
  }

Tistory에서 보려면 👉요기로 클릭!


레퍼런스

https://choppadontbiteme.tistory.com/86
https://velog.io/@bluestragglr/Vue3-무엇이-바뀌나요


profile
달리는 거북

0개의 댓글