1. 컴포지션 API란?
Vue3에서 새롭게 도입된 컴포지션 API(Composition API) 는 기존 옵션 API와 달리,
setup() 함수 안에서 상태와 로직을 정의하고 이를 조합하는 방식이다.
즉, 상태와 로직을 함수 단위로 묶어내는 구조로, 코드 재사용성과 가독성을 높인다.
이 방식은 React의 Hooks와 개념적으로 닮아 있다.
2. Vue 컴포지션 API의 특징
- 함수 기반 선언:
ref,reactive,computed,watch,onMounted등을setup()안에서 호출해 상태와 로직을 정의한다. - 반응성 시스템: Proxy 기반 반응성 덕분에 값 변경을 자동 추적하고, 필요한 부분만 업데이트한다.
- 로직 재사용성: Composable 함수로 로직을 분리해 여러 컴포넌트에서 쉽게 재사용할 수 있다.
- 명확한 구조: 관련된 상태와 로직을 한 함수 안에 모아두어 응집도가 높다.
3. React Hooks의 특징
React는 함수형 컴포넌트와 Hooks를 통해 상태와 로직을 관리한다.
- 함수 기반 선언:
useState,useEffect,useMemo,useCallback등을 함수형 컴포넌트 안에서 호출한다. - 불변성 원칙: 상태 변경 시
setState로 새 값을 교체해야 렌더링이 일어난다. - 로직 재사용성: Custom Hook을 만들어 여러 컴포넌트에서 재사용할 수 있다.
- UI = 함수 철학: 컴포넌트 자체가 함수이며, Hooks는 그 함수 내부에서 로직을 조합하는 방식이다.
4. Vue vs React 비교
| 관점 | Vue 컴포지션 API | React Hooks |
|---|---|---|
| 상태 관리 | ref, reactive → Proxy 기반 자동 추적 | useState → 불변성 원칙, setState로 교체 |
| 라이프사이클 | onMounted, onUnmounted 등 함수 호출 | useEffect로 사이드 이펙트 관리 |
| 로직 재사용 | Composable 함수 | Custom Hook |
| 철학 | “상태와 로직을 조합하는 함수” + 반응성 | “UI는 함수” + Hooks로 로직 조합 |
👉 한 줄 요약:
Vue 컴포지션 API는 React Hooks와 개념적으로 비슷하다.
둘 다 함수 기반으로 상태와 로직을 선언하고 조합하지만, Vue는 Proxy 기반 반응성을, React는 불변성과 Virtual DOM diffing을 활용한다.
떠돌이 생활을 하는. 실업자, 부랑 생활을 하는