1. ref와 reactiveref: 주로 원시 타입(String, Number, Boolean 등)을 반응형으로 만들 때 사용하지만, 객체나 배열도 감쌀 수 있습니다..value를 통해 값에 접근하고 변경합니다.reactive: 객체(Object)나 배열(Array)과 같은 참조 타입만을 반응형으로 만들 때 사용합니다. .value 없이 직접 속성에 접근하고 변경합니다.2. watch(ref)watch 함수에 ref로 선언된 변수를 직접 전달하면, ref의 .value 속성 변화를 감지합니다.코드 예시: Count: {{ count }} Increment Count User Name: {{ user.name }} User Age: {{ user.age }} Change U..

Vue.js 리스트 렌더링Vue.js에서 리스트 렌더링은 배열이나 객체를 기반으로 동적인 목록을 생성하는 데 사용됩니다.이를 위해 v-for 디렉티브를 사용하며, 각 항목을 반복하여 렌더링할 수 있습니다.기본적인 v-for 사용법v-for 디렉티브는 배열의 각 요소를 반복하여 출력할 때 사용됩니다.// 숫자 범위 {{ n }} // 배열 또는 객체 {{ item.text }} 인덱스 사용두번째 선택 인자를 통해서 인덱스를 가져와서 사용할 수도 있습니다. {{ index + 1 }}번쨰 : {{ item.text }} 객체 사용시객체의 속성을 반복할 때, 객체를 받아서 사용할 수도 잇찌만 아래와 같이 value, key 형식으로 따로 받아서 사용가능 하며 이때는 세번째에 선..

Vue.js 조건부 렌더링이란?Vue.js에서 조건부 렌더링이란 특정 조건에 따라 DOM 요소를 표시하거나 제거하는 기능을 의미하며, 이를 통해 사용자는 동적으로 화면을 구성할 수 있습니다.v-ifv-if는 조건이 참일 경우 요소를 렌더링하고, 거짓이면 DOM에서 제거합니다. 내용 숨기기 내용 보이기 v-if를 이용하여 내용이 사라지게도 보이게 할 수 있습니다.v-else 및 v-else-ifv-else는 v-if 조건이 거짓일 때만 요소를 렌더링하며, v-else-if는 추가적인 조건을 설정할 때 사용됩니다. 버튼 A를 눌렀습니다. 버튼 B를 눌렀습니다. 나머지 버튼들을 눌렀습니다. 버튼 A 버튼 B 버튼 C 버튼 Dv-showv-show는 display 속성을 변경하여 요소를 숨깁니..

보호되어 있는 글입니다.

Vue.js에서 상태 관리를 위해 ref와 reactive를 사용할 수 있습니다. 두 방식 모두 반응형(Reactivity) 시스템을 제공하지만, 사용 방법과 동작 방식에서 차이가 있다ref란?ref는 Vue 3에서 제공하는 반응형 상태 관리 방법 중 하나로, 기본형(Primitive) 데이터와 객체(Object) 모두를 반응형 상태로 만들 수 있습니다. 반응형 변수를 개별적으로 관리할 때 유용하며, 값에 접근할 때 .value를 사용해야 합니다.ref의 특징기본형 데이터(숫자, 문자열, 불리언 등)와 객체를 감쌀 수 있음반응형으로 관리하기 위해 .value 프로퍼티를 사용템플릿에서 자동으로 언래핑(자동으로 .value가 적용됨)기본형 데이터에서 ref 사용기본형 데이터를 다룰 때 ref를 사용하는 예제..

소개이전에 Computed 속성에 대해서 자료를 찾던 중에 Method 보다 자주 나온 단어가 Watch 속성이다. 심지어 Computed 와 Watch 를 비교한 Vue.js 공식 문서 페이지가 있다. Watch 속성은 말그래도 보다 라는 말 그대로 지정한 특정 데이터를 계속 바로보며 변경사항이 생기면 바로바로 반응하여 작업한다고 알고 있는데 이거 말고 더 더 특징적인게 있을거라 생각하여 찾아볼려 한다.Watch공식 문서의 설명에 따르면 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성입니다.즉, 비동기 작업이나 API 호출로 인하여 데이터가 변경될 떄 이를 감지하여 특정 동작을 수행하고 싶을 때 유용합니다.기본 사용법/** 실행 결과 **/call beforeCreatecall wa..

보호되어 있는 글입니다.

보호되어 있는 글입니다.