[ vue.js ] vue3 핵심 문법 1

1. Single File Component ( SFC )

vue의 컴포넌트를 하나의 파일로 나타내는 것을 의미한다. 하나의 파일에 하나의 컴포넌트를 나타내므로 관리하기가 쉽고 코드가 간결해진다. 

 

3개의 부분으로 나누어진다.

template - 컴포넌트가 랜더링될 HTML 부분

script - 자바스크립트나 타입스크립트를 사용할 수 있고, <script setup lang="ts"> 와 같이 setup 속성을 사용하면 LOC(Line Of Code)의 양을 줄일 수 있다.

style - css, scss 사용가능하고 scoped 속성을 이용하여 해당 컴포넌트 안에서만 css가 작동할 수 있도록 설정할 수 있다.

 

2. 컴포지션 함수 setup

vue3는 컴포지션 API를 이용해 컴포넌트를 만들 수 있다. 컴포지션 API는 setup 함수 내에서 사용 가능하다. vue2에서는 Options API만 제공을 했고, 컴포넌트를 생성할 때 옵션 속성이라고 불리는 data, method, computed 등과 같은 것들을 정의해야 했지만 코드가 길어지면 오히려 가독성이 떨어지는 문제점이 있어서 vue도 컴포지션 API를 제공하게 됐다.

 

3. vue 컴포넌트의 생명주기

컴포넌트를 생성하고 DOM 노드 트리에 마운트하고, 불필요한 엘리먼트를 제거하는 과정을 생명주기라고 한다. vue는 각 생명주기를 후킹할 수 있는 방법을 제공하는 데, 이를 생명주기 훅(Hook)이라고 한다. 

 

컴포지션 API로 setup에서 생명주기 훅을 사용하기 위해서는 컴포지션 함수를 이용해야 한다. update의 컴포지션 함수는 onUpdate로 아래 처럼 사용할 수 있다.

 

onUpdated(()=>{ // update Action })

 

3-1. beforeCreate

컴포넌트를 생성하기 전에 호출 컴포지션 API의 setup이 beforeCreate를 대체한다. 컴포넌트가 생성되지 전에 호출되기 때문에 생성한 data는 물론, 해당 data를 관찰할 수 있는 watch와 같은 함수들이 동작하지 않는다. 

 

3-2. created

컴포넌트가 생성되면 호출. 컴포넌트 API의 setup이 beforeCreate와 created도 대체한다.

 

3-3. beforeMount(onBeforeMount)

vue의 가상 노드가 render 함수를 호출하기 직전에 호출. 실제 DOM을 구성하기 직전에 호촐된다. 이 beforeMount 사이클이 지나고나면 vue는 Virtual DOM에 가상으로 Rendering할 DOM을 미리 구성한다.

 

3-4. mounted(onMounted)

실제로 컴포넌트의 구성요소들이 DOM 멜리먼트로 마운트된 후 호출

ref와 같은 함수를 통해 엘리먼트의 참조변수를 만들었다면 mounted 사이클 이전까지는 초기화한 값이 들어있고, 실제 엘리먼트를 참조할 수 없었지만, mounted 사이클 이후부터는 해당 변수를 통해 엘리먼트에 접근할 수 있게 된다.

실제로 엘리먼트에 동적으로 변화를 줘야하는 경우에 이 함수에서 처리하는 것이 좋다.

 

3-5. beforeUpdate(onBeforeUpdated)

데이터가 변경되었지만 아직 DOM에 반영되지 않았을 때 호출.

이미 DOM을 구성하는 요소가 있는 데, Virture DOM이 수정되고 이 수정사항이 아직 DOM에 반영되기 직전에 호출되는 것으로 아직 변경사항이 DOM에 반영되지 않았으므로, 실제 엘리먼트를 참조하는 변수로부터 아무것도 얻을 수 없다.

 

3-6. update(onUpdated)

데이터가 변경되어 DOM이 변경완료된 시점에 호출.

이 순간부터 DOM이 업데이트되었다고 보고, 해당 DOM에 참조된 변수를 이용해 다양한 역할을 수행할 수 있다. 하지만 해당 엘리먼트의 자식 노드들이 업데이트가 완료되었다고 보장하지 않는다. 즉 혐재 컴포넌트만 수정되었다는 것을 보장한다. 자식 컴포넌트까지 모두 수정된 것을 기다리기 위해서는 $nextTick을 이용할 수 있다.

사용하는 방법은 아래 링크에서 확인해보면 좋을 것 같다.

 

https://dmitripavlutin.com/vue-next-tick/

How to Use nextTick() in Vue

 

3-7.  onBeforeUnmount

 컴포넌트가 탈착되기 직전에 호출. 아직까지는 모든 기능을 사용할 수 있는 상태로 명시적으로 컴포넌트가 Unmount되기 직전에 해줘야 할 것들을 작성하면 좋다.

 

3-8. onUnmounted

컴포넌트가 탈착되고 나서 호출. 모든 디렉티브와 이벤트 사용 불가

 

3-9. onActivated

keep-alive 태그는 컴포넌트가 다시 렌더링되는 것을 방지하고, 상태를 유지하기 위해 사용. v-is 디렉티브와 함께 쓰이며 v-is 디렉티브가 컴포넌트를 변경할 때 기존 컴포넌트의 상태가 사라지지 않게 하기 위해 사용한다.

<keep-alive>
<component v-is="currentComponent"/>
</keep-alive>

 

3-10. deactivated(onDeactivated)

keep-alive로 상태가 유지되던 컴포넌트가 효력을 상실하면 호출.

 

3-11. onRenderTracked

virture DOM이 변경될 때마다 관찰을 목적으로 생명주기 훅이 호출. 이 함수를 통해서 debuggerEvent 객체를 살펴보면 어떠한 이유로 Virture DOM이 변경이 되는지 알 수 있다. 

 

3-12 onRenderTriggered, onErrorCaptured

onRenderTriggered는 virture DOM이 DOM으로 반영이 되어야 할 때 호출된다. onMounted, onActivated, onUpfdated와 같이 실제 DOM이 변경되기 직전에 호출됨을 알 수 있다. 어떠한 이유로 렌더링되었는 지 확인하기 위해서 debuggerEvent를 살펴보면 된다.

 

onErrorCaptured는 자손 컴포넌트에 에러가 발생하면 어떤 컴포넌트에서 에러가 발생했는 지 확인할 수 있다.