프론트엔드 노트

Vue 3는 프론트엔드 개발자들에게 매우 유용한 도구로 자리 잡았습니다. 특히 Composition API는 더 나은 코드 구조와 재사용성을 제공하여 복잡한 애플리케이션을 관리하는 데 도움을 줍니다. 이번 포스트에서는 Vue 3의 Composition API를 활용하는 방법에 대해 살펴보겠습니다.

Composition API란?

Composition API는 Vue 3에서 새롭게 도입된 기능으로, Vue 2의 Options API와는 다른 방식으로 상태와 로직을 구성할 수 있게 합니다. 이 API는 컴포넌트의 데이터를 정의하고, 메서드를 구성할 수 있는 더 유연한 방법을 제공합니다. 이를 통해 코드를 더 쉽게 이해하고 유지보수할 수 있습니다.

기본 사용법

아래의 코드는 간단한 카운터 예제를 통해 Composition API의 기본 사용법을 보여줍니다.

<template>
  <div>
    <h1>카운터: {{ count }}</h1>
    <button @click="increment">증가</button>
    <button @click="decrement">감소</button>
  </div>
</template>

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

const count = ref(0);

const increment = () => {
  count.value++;
};

const decrement = () => {
  count.value--;
};
</script>

위의 코드에서 ref 함수를 사용하여 반응형 변수를 생성했습니다. count는 카운터의 값을 저장하고 있으며, 버튼 클릭 시 increment와 decrement 함수를 통해 값을 증가시키거나 감소시킵니다.

Reactive()와 Ref()

Vue 3에서는 반응형 상태를 만들기 위해 두 가지 방법인 ref()와 reactive()를 사용할 수 있습니다. ref()는 기본 데이터 타입에 사용하고, reactive()는 객체에 사용됩니다. 아래의 예제를 통해 이 두 가지를 비교해보겠습니다.

<template>
  <div>
    <h1>사용자 정보</h1>
    <p>이름: {{ user.name }}</p>
    <p>나이: {{ user.age }}</p>
    <button @click="incrementAge">나이 증가</button>
  </div>
</template>

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

const user = reactive({
  name: '홍길동',
  age: 30,
});

const incrementAge = () => {
  user.age++;
};
</script>

이 예제에서 user는 reactive()를 통해 반응형 객체로 생성되었습니다. 나이를 증가시키는 버튼을 클릭하면 user.age 값이 변경됩니다.

컴포지션 함수 만들기

Composition API의 강력한 기능 중 하나는 재사용 가능한 컴포지션 함수를 만들 수 있다는 점입니다. 아래 예제를 통해 어떻게 컴포지션 함수를 만들고 사용할 수 있는지 살펴보겠습니다.

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return { count, increment, decrement };
}

<template>
  <div>
    <h1>카운터: {{ count }}</h1>
    <button @click="increment">증가</button>
    <button @click="decrement">감소</button>
  </div>
</template>

<script setup>
import { useCounter } from './useCounter';

const { count, increment, decrement } = useCounter();
</script>

위 코드는 useCounter라는 이름의 컴포지션 함수를 만들고, 이를 통해 카운터 기능을 재사용하고 있습니다. 이렇게 하면 코드의 응집성을 높이고 유지보수를 쉽게 할 수 있습니다.

Watch와 WatchEffect

Composition API에서는 watch와 watchEffect를 사용하여 반응형 데이터의 변화를 감지할 수 있습니다. watch는 특정 값의 변화를 감지하고, watchEffect는 반응형 데이터를 자동으로 추적하여 실행됩니다. 아래 예제를 통해 이 두 가지를 살펴보겠습니다.

<template>
  <div>
    <input v-model="name" placeholder="이름 입력" />
    <p>안녕하세요, {{ name }}!</p>
  </div>
</template>

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

const name = ref('');

watch(name, (newValue) => {
  console.log(이름이 변경되었습니다: ${newValue});
});

watchEffect(() => {
  console.log(현재 이름: ${name.value});
});
</script>

위의 코드에서 watch는 name의 값이 변경될 때마다 콘솔에 출력합니다. watchEffect는 name의 변화를 자동으로 감지하여 현재 값을 출력합니다.

마무리

Vue 3의 Composition API는 직관적이고 유연한 컴포넌트 구조를 제공함으로써 프론트엔드 개발자들에게 많은 이점을 안겨줍니다. ref, reactive, 컴포지션 함수, watch, watchEffect 등을 활용하여 더 나은 애플리케이션을 구축할 수 있습니다. 각 기능을 잘 이해하고 활용하면 복잡한 애플리케이션도 효과적으로 관리할 수 있습니다. 앞으로도 Vue 3의 다양한 기능을 탐구하며 더 많은 실전 사례를 다루어 보겠습니다.

Vue 3에서 Composition API 활용하기

Composition API란?

기본 사용법

Reactive()와 Ref()

컴포지션 함수 만들기

Watch와 WatchEffect

마무리