백엔드가 정리하는 Vue3 - Composition API

안녕하세요. ㅎㅎ

오늘은 Vue 에 대해서 정리하는 시간을 가져볼까 하는데요.

아무래도 백엔드 개발자가 정리하는 글이다 보니 미숙한 점이 많을 수도 있습니다 ^^;

Vue3 

자 그러면 기본적인 것부터 시작해보겠습니다.

물론 세세한 문법을 다 정리하기에는 너무 양이 많아서 디테일한 것은 생략할 예정입니다

Vue3

Vue 라는 것은 아주 간단한 구조로 이루어져 있는 front framework 입니다.

기본적으로 에디팅 하는 방식이 html 기반으로 이루어지다보니

저같은 모자란 백엔드 개발자도 쉽게 개발할 수 있죠

<template>

</template>

<script lang="ts">

</script>

<style>

</style>

Vue file 하나에 대한 전체적인 구조는 

• Template
• Script
• Style

구조로 이루어져 있습니다.

 

Template 은 html 처럼 사용자에게 노출되는 화면에 대한 역할

Script 은 javascript 처럼 동적으로 View 에 대한 행동(Interactive) 에 대한 역할

Style 은 css 처럼 화면에 대한 디자인을 담당하는 역할

 

이라고 볼 수 있어요.!

참 쉽죠?

 

Template 에서는 html 태그를 참고하여 어떻게 보여줄 것인지 전체적인 틀을 잡아주시구요

Style 을 통해서 잡아준 틀에 대하여 디자인을 입혀주시구요

Script 로 사용자의 행동에 대한 Action 을 정의해주시면 됩니다.

 

저는 기본적은 Web 에 대한 동작방식은 안다고 가정하고 작성할 예정이라서

Template 과 Style 에 대한 상세 설명은 생략하도록 할게요.

Template 에 대한 기본적인 문법 설명은 Vue3 공식 문서에 작성되어 있으니 ㅎㅎ

제가 2번 작성할 필요는 없겠죠?

절대 귀찮아서가 아닙니다ㅎㅎ

 

자 그러면 우리는 Script 부분에 대해 좀 더 깊이 알아보도록 하겠습니다.

Vue3 Script

자 이제 어려워질 시간이 왔습니다.

본격적인 설명을 시작하기 전에 우리는 Vue 에서 제공하는 Component 라는 개념에 대해 알아야 하는데요.

Component

쉽게 설명하자면, 각각의 Vue 파일을 계층 트리 구조로 구조화했다. 라고 이해하시면 될 것 같아요.

이렇게 하는 이유는 무엇일까요.?

 

쉽게 예를 들자면,

우리는 농구 게시판을 만들고 싶어서 농구 게시판에 대한 전체적인 구조를 Vue 로 작성하였습니다.

농구 게시판을 너무 잘 만들어서 사용자들이 많아지고, 사용자들이 이제는 야구 게시판이 없냐고 물어봅니다.

 

그러면 개발자는 야구 게시판을 만들기 위해서 처음부터 끝까지 다시 만들어야 할까요?

그럴 필요가 없습니다. 게시판에 대한 전체적인 틀은 비슷하니까요.

 

단지 제목만 야구 게시판으로 바꾸어서 사용자들에게 보여주면 됩니다.

즉, Component 는 View 에 대한 전체적인 틀을 재사용하기 위해 있다 라고 보시면 될 것 같습니다.!

<div id="board-demo">
  <board id="basketball"/>
  <board id="baseball"/>
</div>

이런식으로 말이죠.

 

Vue3 에서는 랜더링하는 방식이 Root 에서 각각의 Component 를 로딩하고 보여주는 형식인

부모 - 자식 Component 의 구조를 가지고 있습니다.

 

그러면 Component 의 상세 구조는 어떻게 되어 있을까요?

Vue3 Component - Composition API

Vue는 API 문서에 정리가 너무너무 잘 되어 있습니다.

저는 문서를 보고 간단히 정리해드리는 사람이라서 링크는 바로 참고해주세요 ㅎㅎ

 

Composition API 필요한 이유?

Vue 공식 문서 링크

우리는 앞서서 Component 가 필요한 이유에 대해 살펴보았죠?

대규모 애플리케이션일 수록 Component 의 재사용성이 아주 중요시되고, 하나의 역할에 맞게 쪼개져있어야 됩니다.

 

Component 에도 여러가지 속성들이 존재하는데요 ( prop, data, computed, hook ... )

하나의 Component 에 너무 많은 속성들이 존재하게 되면, 이해관계가 복잡해져서 결국에는 코드를 유지보수 하고 관리하는데에 

많은 어려움을 가지게 됩니다.

 

그렇기 때문에 Composition API 를 통해서 하나의 Component 에서 가져야할 관심사와 논리적 관계를 명시하는 것입니다.

 

setup

우선 setup 이라는 API가 있는데요.

아~주 간단합니다.

 

setup 은 View 에 동적으로 변하기 위한 상수를 정의하거나

User 의 행동(Interaction) 을 표현하기 위한 함수를 정의하면 됩니다.

 

아래와 같이 말이죠!

<script lang="ts">
import { ref, Ref } from 'vue'

export default defineComponent({
  name: "Board",
  components: {"넣어줄 컴포넌트 작성"},
  setup() {
    const userId: Ref<string> = ref("사용자")
    
    return {
      userId,
      write: async () => {
        console.log(userId + "는 로그인 했다!")
      }
    }
  }
}

</script>

물론 저는 백엔드 개발자이다보니 ㅎㅎ 

Type 이 존재하지 않는 Javascript 에 익숙하지 않아서 Typescript 를 선호하게 되는 것 같습니다

프론트 개발자가 들으시면 극대노하시겠죠

 

어쨌든 setup 은 Component 가 생성되기 전에 Component 의 Option 으로 Composite API 의 진입점 역할을 도와주게 됩니다.

다만 주의할점이 있습니다. setup 은 Component 가 생성되기 전에 실행되는 속성 때문에
this 를 호출할 수 없습니다. 
오로지 props 에만 접근할 수 있는 것이죠 
( 개발하면서 원리를 모르고 개발하다가 엄청 삽질했었습니다.. )

위 코드에서 ref 라는 생성자 함수가 있는데요.

Ref 는 쉽게 말해서 포인터 객체라고 보시면 됩니다.

Javascript 에서는 기본적으로 value 형태로 값을 복사하는 개념인데,

Vue3 의 Ref 는 reference 로 객체에 대한 주소값을 넘겨주어서 반응형으로 사용할 수 있게 해주게 되는 것이죠.

 

provide / inject

가끔씩 우리는 전역변수를 활용하고 싶을 때가 있습니다.

예를 들어, 서비스가 운영되는 지역에 대한 시간(timezone) 설정 같은 것들을 말이죠.

만약에 vue2 를 사용하셨다면 아래와 같은 형태가 익숙하실 텐데요.

app.config.globalProperties.$timezone

Vue3 에서는 해당 방식보다는 조금 더 직관적인 방식을 제공합니다.

provide / inject

일반적으로 Vue 에서는 Root Component 가 존재하고, 자식 Component 가 존재한다고 말씀드렸는데요.

최상단 부모(일반적으로는 App)에서 제공하는 변수들을 하나씩 props 단위로 전파하는 것은 매우 번거로운 방식이기에

부모에서 제공(provide)한 변수를 하위 자식이 언제든지 가져갈(inject) 수 있게 하는 것이 바로

provide / inject 입니다.

 

Spring 개발자라면 너무나 익숙한 의존성 주입 방식입니다.

BeanFactory 에서 Bean 들을 제공(provide) 해서 생성하는 관심만 가지고,

Application 에서 Bean 들을 누가 사용(inject)하는지에는 관심을 안가지게 하는 방식인 것이죠.

LifeCycleHooks

Vue 라이프 사이클에 대해

쉽게 설명하면 Component 에 대한 이벤트 트리거링 함수라고 보시면 될 것 같아요

개념자체는 크게 어렵지 않으니 바로 예제 코드로 가볼까요.?

<script lang="ts">
import { ref, Ref } from 'vue'

export default defineComponent({
  name: "Board",
  setup() {
    onMounted(() => {
      console.log("컴포넌트가 로드 되었습니다.")
    })
    onErrorCaptured(() => {
      console.log("에러가 발생하였습니다.")
    })
  }
}

</script>

on 을 Prefix 로 시작하는 것이 일반적인 컨벤션입니다.

Component 에 대한 생명주기가 유지된다면, 해당 LifeCycleHook 들은 쭈욱 유지되므로 잘 활용히시면 될 것 같아요.

예를 들면, Component 에 대한 Timezone 을 설정하고 싶을 때 onMounted 를 통해 설정할 수 있게 되는 것이죠.

정리

오늘은 가장 기본적인 Vue3 에 있는 Composition API 와 간략하게 Component 에 대해 알아보았는데요.

간단하게 정리해드리면,

• Component 는 UI 화면에 대한 재활용성과 모듈화를 위해서 적절하게 역할을 나누어야 한다.
• Composition API 를 통해서 Component 에 대한 논리적 관계를 명시할 수 있다

참고 링크

https://v3.ko.vuejs.org/guide/introduction.html

시작하기 | Vue.js