Vue Academy · 강의

Composition API를 사용하는 이유

Options API의 한계, 로직 재사용 문제, Composition API의 장점을 알아봅니다.

Composition API를 사용하는 이유은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Vue를 작성하는 두 가지 방법

Vue 3에서는 컴포넌트 로직을 작성하는 두 가지 스타일을 제공합니다. 바로 옵션 API와 컴포지션 API입니다. 두 방식 모두 같은 최종 결과를 만들지만, 코드를 구성하는 방식은 매우 다릅니다.

두 방식의 장단점을 이해하면 상황에 맞는 도구를 선택하고 기존 코드베이스도 자신 있게 읽을 수 있습니다.

옵션 API가 코드를 구성하는 방식

옵션 API는 컴포넌트를 고정된 섹션으로 나눕니다. data, computed, methods, watch, 그리고 생명 주기 훅이 그 예입니다. 하나의 기능을 구성하는 각 부분이 서로 다른 섹션에 들어갑니다.

작은 기능 하나를 구현하려고 파일의 서로 떨어진 네 블록을 건드려야 할 수도 있습니다.

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

문제: 관심사가 흩어집니다

컴포넌트가 커지면 하나의 관심사(예를 들어 검색 상자)에 해당하는 로직이 data, methods, computed, watch에 나뉘어 들어갑니다. 하나의 기능을 따라가려면 계속 위아래로 스크롤해야 합니다.

이를 파편화 문제라고 합니다.

컴포지션 API: 기능별로 그룹화하기

컴포지션 API를 사용하면 하나의 논리적 관심사에 해당하는 모든 코드를 한곳에 모을 수 있습니다. 반응형 상태, 파생 값, 그리고 상태를 변경하는 함수가 나란히 배치됩니다.

위에서 아래로 읽기만 해도 하나의 기능 전체를 한곳에서 볼 수 있습니다.

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

나란히 비교하기

두 번째 예제에서는 count, 여기서 파생된 doubled, 그리고 increment가 함께 있다는 점에 주목하십시오. 옵션 API에서는 이 세 부분이 서로 다른 세 섹션에 들어갔습니다.

옵션 API: 옵션 유형별로 구성
컴포지션 API: 논리적 관심사별로 구성

로직 재사용: 믹스인(기존 방식)

컴포지션 API가 나오기 전에는 로직을 재사용하는 주요 도구가 믹스인이었습니다. 믹스인은 자신의 옵션을 컴포넌트에 병합합니다.

하지만 믹스인에는 실제로 여러 문제가 있습니다. 이름 충돌이 발생하고, 속성의 출처가 불분명하며, 믹스인 사이에 암묵적인 종속성이 생깁니다.

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

로직 재사용: 컴포저블(새로운 방식)

컴포저블은 반응성 API를 사용하고 반응형 상태를 반환하는 함수일 뿐입니다. 일반 함수처럼 호출하므로 각 값의 출처가 명확하게 드러납니다.

마법 같은 병합도, 숨겨진 이름 충돌도 없습니다.

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

컴포저블 사용하기

컴포저블을 가져와 호출하면 count와 increment가 useCounter에서 온다는 사실이 분명해집니다. 구조 분해 할당을 하면서 이름을 바꾸어 충돌을 피할 수도 있습니다.

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

컴포저블이 믹스인보다 나은 이유

명시적인 출처 — 모든 값이 눈에 보이는 함수 호출에서 나옵니다.
이름 충돌 없음 — 자유롭게 구조 분해 할당하고 이름을 바꿀 수 있습니다.
조합 가능 — 하나의 컴포저블이 다른 컴포저블을 호출할 수 있습니다.
타입 친화적 — TypeScript가 반환된 타입을 자동으로 추론합니다.

더 나은 TypeScript 및 개발 도구

컴포지션 API는 일반 함수와 변수로 구성되므로 TypeScript가 특별한 개발 도구 없이도 타입을 추론할 수 있습니다. 직접 작성하고 유지 관리해야 하는 타입의 this가 없으며, 편집기의 자동 완성도 정확하게 작동합니다.

언제 무엇을 사용할까요

컴포지션 API는 중간 규모 이상의 컴포넌트와 재사용하려는 모든 로직에서 특히 유용합니다. 옵션 API도 여전히 완전히 유효하며, 아주 작은 컴포넌트에서는 읽기 편할 수 있습니다.

새로운 Vue 3 코드에서는 일반적으로 컴포지션 API를 선호합니다. 특히 곧 배우게 될 <script setup>과 함께 사용할 때 그렇습니다.

빠른 확인

컴포지션 API가 존재하는 이유에 대해 배운 내용을 테스트해 보십시오.

복습

이 레슨에서 배운 내용은 다음과 같습니다.

옵션 API는 옵션 유형별로 코드를 구성하므로 하나의 기능이 여러 섹션에 흩어집니다.
컴포지션 API는 논리적 관심사별로 코드를 그룹화합니다.
믹스인은 로직을 재사용하지만 이름 충돌과 숨겨진 출처를 일으킵니다.
컴포저블은 반응형 상태를 반환하는 일반 함수로, 출처가 명확하고 충돌이 없으며 서로 조합할 수 있습니다.

자주 묻는 질문

“Composition API를 사용하는 이유” 강의는 무료인가요?

네 — “Composition API를 사용하는 이유” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Composition API를 사용하는 이유”에서 뭘 배우나요?

Options API의 한계, 로직 재사용 문제, Composition API의 장점을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Composition API를 사용하는 이유” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기