vue37 Vue3에서의 상태 관리: ref()와 reactive()의 차이와 사용법 Vue3에서는 Composition API를 통해 상태를 정의하는 방식이 달라졌습니다. 특히, 가장 많이 사용되는 두 가지 핵심 함수는 바로 ref()와 reactive()입니다. 이 둘의 차이와 사용법을 잘 이해하면 Vue3의 반응형 시스템을 제대로 활용할 수 있어요.1. ref()란?ref()는 기본형 데이터 또는 단일 값을 반응형으로 만들기 위한 함수입니다. 숫자, 문자열, 불리언 등 프리미티브 타입을 주로 감쌀 때 사용합니다.import { ref } from 'vue'const count = ref(0) // 숫자 상태const message = ref('hi') // 문자열 상태.value로 실제 값에 접근하거나 수정해야 함템플릿에서는 .value 없이 바로 사용 가능console.lo.. 2025. 7. 22. Vue3 setup() 함수 완벽 가이드: Composition API의 시작 점 왜 setup()이 중요한가?Vue3에서 가장 큰 변화는 바로 Composition API의 도입입니다. 그 중심에 있는 것이 setup() 함수인데요, 이 함수는 Vue3 컴포넌트가 실행되기 전에 가장 먼저 호출되는 함수로, 반응형 변수 정의, 로직 분리, props/emit 처리 등 모든 핵심 동작의 출발점입니다. Vue2의 data, methods, computed 등을 하나의 공간에서 함수형으로 작성할 수 있게 해주는 Vue3의 뼈대이자 심장이라 할 수 있어요. 1. setup() 함수란?setup()은 컴포넌트가 생성될 때 가장 먼저 실행되며, 다음과 같은 역할을 합니다.반응형 변수 정의 (ref, reactive)함수 정의props 및 emit 처리라이프사이클 훅 등록반환한 값들을 템플릿에서 .. 2025. 7. 21. Vue3와 Vue2의 차이점: 한눈에 정리하는 핵심 변화 왜 Vue3를 배워야 할까?Vue.js는 프론트엔드 개발에서 React와 함께 가장 많이 사용되는 자바스크립트 프레임워크 중 하나입니다. Vue2는 많은 프로젝트에서 오랫동안 사용되었지만, 최근에는 Vue3로의 전환이 활발히 이루어지고 있습니다. Vue3는 단순한 버전 업그레이드가 아니라, 성능 개선, 개발 방식 변화, 코드 구조의 유연성 향상 등을 포함한 대규모 리팩터링이라고 할 수 있습니다. 이 글에서는 Vue2를 이미 알고 있는 분들을 대상으로, Vue3에서 새롭게 바뀐 핵심 요소들을 세 가지 주요 카테고리로 나눠 비교 정리해 보겠습니다. 1. Composition API vs Options APIVue2는 data, methods, computed, watch 등을 분리해서 사용하는 Options.. 2025. 7. 21. 이전 1 2 다음