Composition API에서 axios를 사용하는 기본적인 방법을 알아보겠습니다. 📌 ref, onMounted를 활용한 axios.get jsonplaceholder REST API axios.get Loading... Error : {{ error }} {{ data }} ✅ 설명onMounted()에서 fetchData()를 호출하여 API 데이터를 가져옴ref()를 활용해 data, loading, error 상태를 관리axios.get(url)을 통해 비동기 요청을 실행try-catch-finally를 사용하여 오류 처리 및 로딩 상태 관리✅ 결과axios 성공 여부에 따른 responMessage 호출    📌 ref 를 활용한 axios.post jsonpl..

Composition API에서 provide와 inject는 부모 컴포넌트에서 데이터를 제공(provide)하고, 하위 컴포넌트에서 이를 주입(inject)받아 사용할 수 있도록 하는 기능입니다. 📌provide와 inject의 핵심 개념provide(key, value): 부모 컴포넌트에서 데이터를 제공inject(key, default value(없이도 사용 가능) ): 자식 컴포넌트에서 데이터를 주입받아 사용깊은 컴포넌트 트리에서도 데이터를 쉽게 전달 가능 (props를 여러 단계 거칠 필요 없음)  📌provide, inject 기본 사용 방법✅ 부모 컴포넌트에서 데이터 제공 (provide) parentComponent   ✅ 자식 컴포넌트에서 데이터 주입 (inject) ..

reactive로 만든 객체는 반응형이지만 개별 속성을 구조 분해 할당하면 반응형을 잃어버릴 수 있습니다.이를 방지하기 위해 toRef와 toRefs를 사용하여 개별 속성을 ref로 변환할 수 있습니다. 📌toRef 사용 방법toRef는 reactive 객체의 특정 속성을 ref로 변환합니다.이렇게 하면 .value 없이 reactive 객체처럼 사용할 수 있습니다. count : {{ count }} 증가  ✅ toRef가 사용 이유reactive 객체의 속성을 직접 구조 분해 하면 반응형이 사라짐toRef를 사용하면 해당 속성을 ref로 유지할 수 있음 count : {{ count }} 증가    📌toRefs 사용 방법toRefs는 reactive 객체의 모든 속성을 re..

Composition API에서 ref와 reactive는 반응형 상태를 만들기 위해 사용됩니다. 두 속성은 동작 방식과 사용법에 차이가 있습니다. 📌ref (단일 값 또는 객체를 감싸는 반응형 래퍼)ref는 기본 자료형(number, string, boolean 등) 또는 객체를 감싸서 반응형으로 만듭니다.  ✅ ref 예제 (기본 자료형) count : {{ count }} count 증가    ✅ ref 예제 (객체) 나이 : {{ user.age }} 나이 변경   ✅ ref 특징.value를 사용해야 값에 접근 가능객체를 감쌀 수도 있지만, reactive보다 덜 직관적일 수 있음   📌reactive (객체나 배열..

Composition API에서 watch와 watchEffect는 반응형 데이터를 감시할 때 사용되지만, 작동 방식과 사용 목적에 차이가 있습니다.   📌watch (명시적인 감시 대상)watch는 특정 반응형 변수를 감시하여 값이 변경될 때만 실행됩니다. count : {{ count }} count 증가    ✅ 출력 값  ✅ button 클릭 후 출력 값  ✅ button 클릭 후 콘솔  ✅ 특징count를 명시적으로 감시값이 변경될 때만 콜백 실행기본적으로 처음 한 번 실행되지 않음    📌watchEffect (자동 감지)watchEffect는 내부에서 사용된 반응형 데이터를 자동으로 감지하여 실행됩니다. count : {{ coun..

computed와 watch는 반응형 데이터의 변경을 감지하고 적절한 처리를 수행할 때 유용합니다. 각각의 사용법을 설명하겠습니다. 📌computed (계산된 속성)computed는 종속된 반응형 데이터가 변경될 때 자동으로 재계산되는 속성입니다. 주로 값의 캐싱과 의존성 기반 자동 업데이트가 필요할 때 사용합니다. 가격 : {{ price }} 수량 : {{ quantity }} 총 가격 : {{ totalPrice }}    ✅ 출력 값  ✅ 특징종속된 반응형 값(price, quantity)이 변경될 때만 다시 계산 (캐싱 기능)computed 값은 함수처럼 호출하지 않고 속성처럼 접근(totalPrice.value)   📌watch (감시자)w..