Vue.js에서 Composition API란 무엇인가요?

Q: Composition API란 무엇인가요?
A: Composition API는 Vue 3에서 도입된 새로운 API 세트로, 컴포넌트 로직을 함수 단위로 분리·구성하여 재사용성과 가독성을 높이는 방식입니다. 기존 Options API의 data, methods, computed, watch 옵션을 함수 호출 형태로 대체합니다.

Q: Composition API를 쓰는 이유는 무엇인가요?
A:
- 로직 재사용성: 여러 컴포넌트 간 로직을 함수(Composable)로 분리해 재사용 가능
- 가독성 향상: 관련된 코드(상태·연산·부수효과 등)를 한 곳에 모아 가독성 확보
- TypeScript 친화성: 명시적 타입 선언이 용이해 대규모 프로젝트에서 안정성 강화
- 테스트 용이성: 순수 함수 단위로 분리된 로직을 단위 테스트하기 쉬움

Q: Options API와의 차이점은 무엇인가요?
A:
- Options API: data, methods, computed, watch 등의 옵션에 기능별 코드가 분리되어 한눈에 파악하기 어려울 수 있음
- Composition API: setup() 함수 안에서 상태·메서드·라이프사이클 훅을 호출 순서대로 배치해 관련 코드를 묶어 관리

Q: 기본 사용법은 어떻게 되나요?
A:
1. 컴포넌트에 `setup()` 훅 정의
2. `ref()`, `reactive()`로 반응형 상태 선언
3. `computed()`, `watch()`로 파생 상태·감시 로직 정의
4. `setup()`에서 반환한 객체를 템플릿에서 사용
예)
```js
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function inc() { count.value++ }
return { count, double, inc }
}
}
```

Q: ref()와 reactive()의 차이는 무엇인가요?
A:
- ref(initialValue): 원시값 또는 객체를 감싼 단일 반응형 값. `.value`로 접근
- reactive(object): 객체 및 중첩 객체 전체를 반응형으로 변환. 일반 프로퍼티 접근

Q: computed()와 watch()는 언제 사용하나요?
A:
- computed(): 상태로부터 파생된 값을 선언형으로 정의할 때 사용
- watch(): 반응형 값 변화에 따른 부수효과(비동기 호출, 로깅 등)를 실행할 때 사용

Q: 라이프사이클 훅은 어떻게 쓰나요?
A: setup() 안에서 `onMounted`, `onUpdated`, `onUnmounted` 등을 import하여 호출합니다.
예)
```js
import { onMounted } from 'vue'
setup() {
onMounted(() => console.log('컴포넌트 마운트됨'))
}
```

Q: Composable이란 무엇이며 어떻게 만들고 사용하나요?
A: Composable은 재사용 가능한 로직 단위 함수입니다. setup() 밖에 정의해 필요한 곳에서 import·호출합니다. 예)
```js
// useCounter.js
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
const inc = () => count.value++
return { count, inc }
}

// MyComponent.vue
import { useCounter } from './useCounter'
setup() {
const { count, inc } = useCounter()
return { count, inc }
}
```

Q: provide/inject는 어떻게 사용하나요?
A:
- setup() 안에서 `provide(key, value)`로 상위 컴포넌트가 값을 제공
- 하위 컴포넌트는 `setup()` 안에서 `inject(key)`로 값 주입
Vue 인스턴스 계층 간 의존성 주입에 활용

Q: Composition API의 단점이나 주의점은?
A:
- 러닝 커브: 기존 Options API에 익숙한 개발자에게 초기 학습 부담
- 코드 구조화 책임: setup()가 커지면 오히려 복잡해질 수 있으므로 Composable 분리 필요
- 가독성 이슈: 과도한 Hook 호출 시 코드가 길어질 수 있음

Q: TypeScript와 함께 쓸 때 유의사항은?
A:
- ref, reactive에 제네릭 타입 명시 가능
- setup() 반환 객체에 대한 타입 추론 활용
- 인터페이스·타입 선언으로 상태 구조를 명시적으로 정의

Q: Composition API로 마이그레이션하는 방법은?
A:
1. 컴포넌트별로 로직 단위로 분리할 부분 식별
2. useXxx 형식의 Composable 파일 생성
3. setup()로 Options API 코드를 옮기며 ref/reactive 등으로 변환
4. 점진적 적용: 일부 컴포넌트부터 Composition API로 변경 후 전체 확장

Q: 언제 Composition API를 선택해야 하나요?
A:
- 복잡한 상태 관리나 로직 재사용이 필요한 대규모 프로젝트
- TypeScript 도입으로 정적 타입 검사와 안정성 강화가 필요한 경우
- 여러 컴포넌트 간 유사 기능이 많아 Composable로 묶어 관리하고 싶을 때

Q: Composition API 학습 자료 추천은?
A:
- 공식 문서(Vue.js 공식 사이트)
- Vue Mastery, Vue School 등 온라인 강의
- 커뮤니티 튜토리얼 및 GitHub 예제 레포지토리
- Vue RFC·코어 팀 블로그 포스트

以上가 Vue.js Composition API에 대한 주요 FAQ입니다.

Vue.js에서 Composition API는 Vue 3에서 도입된 새로운 API로, Vue의 기존 Options API와는 다른 방식으로 컴포넌트를 구성하고 상태를 관리할 수 있는 방법을 제공합니다. Composition API는 더 나은 코드 재사용성과 가독성을 제공하며, 복잡한 컴포넌트를 더 쉽게 관리할 수 있도록 돕습니다. Composition API의 주요 개념 1. Reactive 상태 관리 : Composition API는 `reactive`와 `ref`를 사용하여 반응형 상태를 정의합니다. `reactive`는 객체를 반응형으로 만들고, `ref`는 <a href='https://sangseek.com/sangseeks/기본 데이터/ko'>기본 데이터</a> 타입(문자열, 숫자 등)을 반응형으로 만듭니다. ```javascript import { reactive, ref } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); const message = ref('Hello, Vue!'); function increment() { state.count++; } return { state, message, increment }; } }; ``` 2. Setup 함수 : Composition API의 핵심은 `setup` 함수입니다. 이 함수는 컴포넌트가 생성될 때 호출되며, 반응형 상태와 메서드를 정의하고 반환합니다. `setup` 함수 내에서 정의된 모든 <a href='https://sangseek.com/sangseeks/변수/ko'>변수</a>와 함수는 템플릿에서 사용할 수 있습니다. 3. Lifecycle Hooks : Composition API는 Vue의 생명주기 훅을 사용할 수 있는 방법을 제공합니다. `onMounted`, `onUpdated`, `onUnmounted`와 같은 훅을 사용하여 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있습니다. ```javascript import { onMounted } from 'vue'; export default { setup() { onMounted(() => { console.log('컴포넌트가 마운트되었습니다.'); }); } }; ``` 4. Computed Properties : `computed` 함수를 사용하여 계산된 속성을 정의할 수 있습니다. 이는 기존의 `computed` 속성과 유사하지만, Composition API의 문맥에서 사용됩니다. ```javascript import { computed } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); const doubleCount = computed(() => state.count * 2); return { state, doubleCount }; } }; ``` 5. Composition Functions : Composition API의 가장 큰 장점 중 하나는 코드 재사용성을 높일 수 있다는 점입니다. 여러 컴포넌트에서 공통적으로 사용되는 로직을 별도의 함수로 분리하여 재사용할 수 있습니다. ```javascript function useCounter() { const state = reactive({ count: 0 }); const increment = () => { state.count++; }; return { state, increment }; } export default { setup() { const { state, increment } = useCounter(); return { state, increment }; } }; ``` Composition API의 장점 1. 코드의 가독성 향상 : 관련된 로직을 함께 묶어 관리할 수 있어 코드가 더 명확해집니다. 2. 재사용성 : 로직을 함수로 분리하여 여러 컴포넌트에서 쉽게 재사용할 수 있습니다. 3. 유연성 : 상태와 메서드를 자유롭게 조합할 수 있어 복잡한 컴포넌트를 더 쉽게 관리할 수 있습니다. 4. 타입스크립트 지원 : Composition API는 TypeScript와의 호환성이 뛰어나, 타입 정의가 용이합니다. 결론 Composition API는 Vue.js의 강력한 기능 중 하나로, 개발자에게 더 나은 코드 구조와 재사용성을 제공합니다. 기존의 Options API와 함께 사용할 수 있으며, 점진적으로 새로운 프로젝트나 기존 프로젝트에 도입할 수 있습니다. Vue 3의 Composition API는 현대적인 웹 개발에서의 복잡한 상태 관리와 컴포넌트 구조를 보다 효율적으로 처리할 수 있는 방법을 제시합니다.