728x90

2025/03/12 2

[Nuxt3] storeToRefs()

storeToRefs()는 Pinia에서 ref()로 변환된 반응형 상태를 개별적으로 추출하는 함수입니다.Pinia 스토어의 state 속성들을 ref()로 변환하여 개별적으로 추출반응형 유지 – storeToRefs()를 사용하면 ref()가 유지되므로 값이 변경될 때 UI가 자동으로 업데이트됨객체 분해(구조 분해 할당) 시 반응성 유지 언제 storeToRefs()를 사용해야 할까?상황storeToRefs() 필요 여부state를 구조 분해 할 때✅ 필요state를 그대로 사용할 때❌ 필요 없음actions와 getters를 구조 분해 할 때❌ 필요 없음 storeToRefs() 없이 사용하는 경우Pinia 스토어에서 상태를 가져올 때, 구조 분해 할당을 직접 하면 반응성을 잃어버릴 수 있음.impo..

Javascript/NuxtJS 2025.03.12

[Nuxt3] ref()와 computed() 차이점

요약사용 상황 ref()computed()기본적인 반응형 상태 관리✔️❌상태를 기반으로 새 값 계산❌✔️값이 변경될 때만 재계산 필요❌✔️상태 변경 가능해야 함✔️❌ (기본 읽기 전용) 1. ref() – 반응형 데이터 만들기ref()는 간단한 값(숫자, 문자열, 객체 등)을 반응형으로 관리할 때 사용합니다.import { ref } from "vue";const count = ref(5);console.log(count.value); // 5count.value++; // 값 변경console.log(count.value); // 6ref()의 특징.value를 통해서만 값을 읽거나 쓸 수 있습니다.Vue가 값 변경을 자동으로 추적하여 UI를 업데이트합니다.객체를 ref()로 사용할 경우const us..

Javascript/NuxtJS 2025.03.12
728x90