![]()
Ⅰ. 이 글의 목표이번 글의 목표는 저위험 컴포넌트부터 Vue 3 Composition API로 바꿔 보는 연습을 해보는 것입니다.이미 Vue 3 + Compat build까지 해둔 상태라고 가정하고, 이번 글에서는기존 Options API 컴포넌트 → Composition API Ⅲ. export default { ... } → Vue 3에서는 mixin보다 composable 함수를 권장합니다.같은 기능을 composable로 옮겨보면 아래와 같습니다.// src/composables/useDateFormat.js (변경 후)export function useDateFormat { const formatDate = (date) => { if (!date) return '' ..
![]()
1. 왜 Composition API를 써야 할까?Vue2에서는 data, methods, computed, watch 같은 Options API로 컴포넌트를 구성했습니다.작은 컴포넌트에서는 직관적이지만, 컴포넌트가 커질수록 문제가 커집니다.관련된 로직이 data / methods / watch 여기 저기 흩어지고,하나의 기능(예: 폼 처리, API 호출)을 이해하려면 파일 전체를 위아래로 왔다 갔다 해야합니다.이 문제를 해결하기 위해 Vue 3에는 Composition API가 도입되었습니다.Composition API는 로직을 기능 단위로 묶고 재사용하기 쉽게 하기 위한 새로운 API 세트입니다.이번 글에서는 setup() 함수, ref, reactive 세 가지를 중심으로 정리해 볼게요. 2. s..
