Vue 3.0/01.Intro 및 설정

[vue 3] 04.코드 작성 방법

Vue.js는 매우 다양한 방법으로 코드를 작성할 수 있다. 초보자 입장에서는 한가지만 "딱" 점지해주면 좋으련만 개발자의 성향, 상태를 고려해서인지 이것 저것 방법이 많다. 물론 결과물의 동작은 동일하다.

이번 포스트에서는 각각의 코드 작성 방법에 대해서 살펴보자.

Options vs Composition

가장 기본적인 분기는 사용하려는 API 스타일에 따라서 Options 방식의 API를 사용할것인가? 아니면 Composition 방식의 API를 사용할 것인가이다.

https://vuejs.org/guide/introduction.html#api-styles

Introduction | Vue.js

vuejs.org

Options API 방식

Options API 방식은 Vue.js 2.x 버전에서 부터 사용되던 방식이다.

이 방식은 <script> 태그 내에서 Vue에서 사용하기 위한 하나의 Options 객체를 만들어서 export 시킨다.

options 객체 내부에서는 data, methods 등 성격에 따라 미리 지정된 속성을 객체로 작성하고 내부에서 다른 요소를 참조할 때는 this를 이용한다.

위 코드에서는 counter를 증가시키는 동작과 name을 alert으로 출력하는 동작 두 가지가 작성되어있다. 만약 오늘 처음 위 코드를 접하는 개발자가 counter 증가 부분을 수정하려면 몇 군데를 참조해야할까?

counter의 이름을 cnt로 바꾸고 2씩 증가하게 하자!

counter가 선언된 data 부분과 counter에 대한 수정 코드가 있는 methods 부분을 참조해야 한다. 코드가 길어지면 여기 저기 흩어진 counter를 찾아 상당한 스크롤을 해대며 분석하느라 정신이 없을 것이다.

Composition API 방식

Composition API 방식은 Vue.js 3.x에서 추가된 방식이다.

이 방식은 <script>가 아닌 <script setup>에서 출발한다. 특별한 객체를 만드는게 아니라 그냥 script에 구성 요소들을 선언하는 형태이다.

composition 방식은 요소들을 성격에 따라 모아놓을 필요가 없이 논리적인 동작에 따라 모아서 작성할 수 있다. 하나의 객체 내부가 아니기 때문에 다른 요소를 참조할 때 this를 사용할 필요도 없다.

이제 counter를 증가시키는 코드를 수정하려고 한다면 붉은 영역만 참조하면 된다. 힘들게 관련 내용을 찾아서 헤매지 않아도 되는 것이다.

어떤 방식을 고를까요?

두 가지 코딩 방식을 옆에 놓고 보면 확실히 특징이 보인다.

Options API 방식은 객체지향 중심의 접근 방식이고 Composition API 방식은 논리 중심의 접근 방식이다. 객체지향 방식에 익숙한 개발자는 필요한 것을 지정된 곳에서 찾아서 사용하는데 무리가 없다. 잘 정리된 선반에서 물건 찾는게 뭐가 어렵겠는가? 여기 저기 난잡하게 있는 것보다 훨씬 편할 것이다.

하지만 초급자가 로직을 분석하기 위해서 종횡무진 코드를 스크롤 하는것도 쉬운일은 아니다. 특히 내가 작성한 코드가 아니라 다른 사람의 코드를 분석한다면 더욱 그럴 것이다.

종류별로 모아서 작성할 것인가? 필요한것들 끼리 모아서 작성할 것인가?

공식 문서에서는 어느 것을 골라도 상관 없다고 밝히고 있기는 하지만 선택장애인 우리를 위해 아래와 같이 가이드 하고 있다.

For learning purposes, go with the style that looks easier to understand to you. Again, most of the core concepts are shared between the two styles. You can always pick up the other one at a later time.
For production use:
- Go with Options API if you are not using build tools, or plan to use Vue primarily in low-complexity scenarios, e.g. progressive enhancement.
- Go with Composition API + Single-File Components if you plan to build full applications with Vue.

머야.. 결국 우리는 제품 개발을 해야하고 build tool을 이용해서 SFC 기반으로 개발해야하는데 Composition API 쓰라는 이야기잖아!!

아직은 Build tool을 사용할 단계가 아니다!

Build Tool? SFC?

Vue에서는 .vue 파일을 이용해서 SFC(Single File Component)를 만드는 것을 권장하는데 이를 위해서는 vite라는 build tool을 이용한다. 하지만 바로 SFC나 vite를 학습하기는 너무 힘들기 때문에 당분간은 html 기반으로 간단한 예제들을 작성해보자.

build tool을 사용할 때는 npm을 이용해서 vue를 설치해서 사용하지만 그렇지 않을 때는 cdn 방식으로 script를 로딩해서 사용한다.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

HTML에서 Composition API 기반의 애플리케이션 작성

앞에서 살펴본 형태는 <script setup>에서 코드를 작성한 형태이고 다음은 <script>의 createApp 함수 내부에 setup 에서 작성하는 형태이다. 초기 함수를 작성하는 부분만 다르고 나머지는 작성은 동일하다.

먼저 HTML에서 composition API 기반의 Application을 만들어보자. 본격적으로 composition을 사용하기 위해서는 build tool을 이용해야 하는데 html에서의 작성은 약간 과도기 같기도 하다.

<script src="https://unpkg.com/vue@3"></script> 를 이용해서 Vue 라이브러리를 로딩한다.
구조분해 할당(Destructuring assignment)를 이용해서 Vue의 속성 중 createApp과 ref를 받아온다.
createApp은 Vue Application 작성을 위한 출발점으로 mount를 통해 화면 즉 View와 연결된다. 여기서는 #app이라는 DOM이 지정되었고 이것을 template이라고 한다.
createApp 내부에서는 setup 함수를 작성하고 필요한 반응성 데이터나 함수들을 작성한다.
setup에서 작성한 내용 중 template에서 사용되는 것들(count, increase, name, sayHi)은 반드시 return 해주어야 한다.

<!DOCTYPE html>
<html lang="en">
	<body>
		<div id="app">
			<button @click="increase">{{ count }}</button>
			<button @click="sayHi">{{ name }}</button>
		</div>
	</body>
</html>

<script src="https://unpkg.com/vue@3"></script>

<script>
	const { createApp, ref } = Vue;

	createApp({
		setup() {
			const count = ref(0);
			const increase = () => {
				count.value++;
			};
			const name = ref("composition api");
			const sayHi = () => {
				alert(name.value);
			};
			return { count, increase, name, sayHi };
		},
	}).mount("#app");
</script>

앞으로 vite를 적용하기 전까지는 위 형태로 코드를 작성해보자.

HTML에서 Options API 기반의 애플리케이션 작성

동일한 내용을 Options API로 구성하면 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="app">
      <button @click="increase">{{ count }}</button>
      <button @click="sayHi">{{ name }}</button>
    </div>
  </body>
</html>
<script src="https://unpkg.com/vue@3"></script>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        count: 0,
        name: "options api",
      };
    },
    methods: {
      increase() {
        this.count++;
      },
      sayHi() {
        alert(this.name);
      },
    },
  }).mount("#app");
</script>

snippet 작성

앞으로 자주 사용 할 composition api에 대한 템플릿 코드를 snippet으로 등록해놓으면 코드 작성 시간이 훨씬 줄어들게 된다. 다음 글을 참조하여 html.json에 snippet을 등록해놓자.

https://goodteacher.tistory.com/80

[vscode]snippets 작성

vscode에서 snippet을 작성해보자. file --> preferences --> user snippets 를 선택하면 어떤 파일 타입에 snippets을 작성할 것인지 물어본다. 예를 들어 html에서 사용할 snippet이라면 html.json을 선택한다...

goodteacher.tistory.com

다음은 snippet 파일의 일부이다.

{
    "vuecdn": {
      "prefix": "quietjun_cdn_vue",
      "body": [
        "<!DOCTYPE html>" , 
        "<html lang='en'>" , 
        "" , 
        "<body>" , 
        "    <div id='app'>" , 
        "    </div>" , 
        "</body>" , 
        "" , 
        "</html>" , 
        "" , 
        "<script src='https://unpkg.com/vue@3'></script>" , 
        "" , 
        "<script>" , 
        "    const { createApp, ref } = Vue;" , 
        "" , 
        "    createApp({" , 
        "        setup() {" , 
        "" , 
        "            return {  };" , 
        "        }," , 
        "    }).mount('#app');" , 
        "</script>"
      ],
      "description": "cdn 기반의 뷰 작성(composition, setup)"
    },
  }

저작자표시 비영리 변경금지

'Vue 3.0 > 01.Intro 및 설정' 카테고리의 다른 글

[vue 3] 03.Hello Vue (0)	2022.06.18
[vue 3] 02.개발환경 구축 (0)	2022.06.17
[Vue 3] 01.Intro (0)	2022.06.16

Contents

새소식