🌱 성장일지 8.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

• 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
• 성장하고 있는 것이 살아 있는 것이다.
• 생명의 유일한 증거는 성장이다!

⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.

Vue3 Options API와 Composition API 2가지

vue 확장자 파일에서 Options API와 Composition API를 사용하는 방법에 대해 간단하게 정리해보자.

1. Options API

<template>
  <form action="" @submit.prevent="submitUserInfo">
    <div>
      <label for="userId">ID:</label>
      <input type="text" id="userId" v-model="id" />
    </div>
    <div>
      <label for="userPassword">PW:</label>
      <input type="text" id="userPassword" v-model="password" />
    </div>
    <button type="submit">로그인</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      password: '',
    };
  },
  methods: {
    submitUserInfo() {
      fetch('https://jsonplaceholder.typicode.com/users', {
        method: 'POST',
        body: JSON.stringify({
          id: this.id,
          password: this.password,
        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      }).then(response => {
        console.log(response);
      });
    },
  },
};
</script>

<style scoped></style>

2. Composition API - 1

<template>
  <form action="" @submit.prevent="submitUserInfo">
    <div>
      <label for="userId">ID:</label>
      <input type="text" id="userId" v-model="id" />
    </div>
    <div>
      <label for="userPassword">PW:</label>
      <input type="text" id="userPassword" v-model="password" />
    </div>
    <button type="submit">로그인</button>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const id = ref('');
    const password = ref('');

    const submitUserInfo = () => {
      fetch('https://jsonplaceholder.typicode.com/users', {
        method: 'POST',
        body: JSON.stringify({
          id: id.value,
          password: password.value,
        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      }).then(response => {
        console.log(response);
      });
    };

    return {
      id,
      password,
      submitUserInfo,
    };
  },
};
</script>

<style scoped></style>

3. Composition API - 2

<template>
  <form action="" @submit.prevent="submitUserInfo">
    <div>
      <label for="userId">ID:</label>
      <input type="text" id="userId" v-model="id" />
    </div>
    <div>
      <label for="userPassword">PW:</label>
      <input type="text" id="userPassword" v-model="password" />
    </div>
    <button type="submit">로그인</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const id = ref('');
const password = ref('');

const submitUserInfo = () => {
  fetch('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    body: JSON.stringify({
      id: id.value,
      password: password.value,
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
  }).then(response => {
    console.log(response);
  });
};
</script>

<style scoped></style>

반드시 기억할 것은, Composition API가 Vue 3라는 게 아니라는 점이다. Vue 3에서 Composition API를 사용할 수 있을 뿐이다.

기본적으로 vue.js의 구현 및 동작 방법을 익히기 위해서는 Options API를 사용하고 React의 hook처럼 선언적으로 코드를 작성하고 싶다면 Composition API를 사용하면 된다.

Composition API를 사용하면 Options API보다 코드가 간결해지고, 코드의 재사용성이 높아진다는 장점이 있다.

📝 회고

뭔가 간단한 컴포넌트 구조는 vue로 설계하는 게 어렵지 않은데, 지금까지 내가 React로 구현한 프로젝트들을 vue로 구현해본다고 하면 쉬울지 아직 감이 안온다. 또, 막연하게 Composition API가 곧 vue 3이고 최근의 vue는 Options API를 사용하지 않는 줄 알았다. 여러가지 오해가 있었는데, 이번 기회에 제대로 알게 되어 다행!!!

참고

• Vue 3 - Options API, Composition API