개요 Vue.js에서 watch는 반응형 시스템의 핵심 기능 중 하나이다. 이는 데이터의 변경을 감지하고 그에 대한 콜백 함수를 실행하는 데 사용된다. Vue 3에서 watch 기능은 Composition API의 일부로 재구성되었으며, 더욱 강력하고 유연한 데이터 반응성 관리를 가능하게 한다. 사용법 기본 사용법 watch는 두 가지 주요 인자를 받는다: 반응형 데이터 소스와 그 데이터 소스가 변경될 때 호출되는 콜백 함수이다. 데이터 소스는 반응형 참조(ref) 또는 반응형 객체(reactive)의 특정 속성이 될 수 있다. 추가 옵션 즉시 실행 옵션 watch는 immediate 옵션과 함께 사용하여 컴포넌트 마운트 시 콜백 함수를 즉시 실행할 수 있다. 깊은 감시 옵션 deep 옵션을 사용하여 객..
개요 Vue 3의 Composition API에 있는 shallowRef는 ref와 유사하지만, 주된 차이점은 shallowRef가 제공하는 반응성이 훨씬 얕다는 점이다. shallowRef는 주어진 값에 대해서만 반응형을 제공하며, 값이 객체인 경우 그 객체의 속성까지는 반응형으로 만들지 않는다. 기본 사용법 shallowRef를 사용할 때, 객체나 배열을 전달하면 Vue는 해당 객체의 최상위 레벨에만 반응형을 적용한다. 이 말은, 객체의 속성이나 배열의 요소가 변경되어도, Vue는 이를 감지하지 못한다는 의미다. 하지만 객체 자체가 다른 객체로 교체되면 이 변경은 감지된다. shallowRef는 큰 객체나 배열을 다룰 때 유용하다. 만약 객체의 내부 속성들이 변경될 일이 거의 없거나 전혀 없다면, s..
개요 Vue 3에서 ref는 Composition API의 핵심 기능 중 하나다. 이 기능은 데이터를 반응형으로 만들어, 해당 데이터의 변화가 Vue의 렌더링 시스템에 자동으로 반영되게 한다. ref를 사용하면 단일 값이나 객체를 Vue의 반응형 시스템에 통합할 수 있다. 기본 사용법 ref를 사용하여 반응형 변수를 생성하려면, ref 함수를 호출하고 초기 값을 설정한다. 생성된 ref 객체는 .value 속성을 통해 내부 값에 접근하고 수정할 수 있다. 아래 예시에서 count는 ref를 사용하여 생성된 반응형 변수다. Increment Count is: {{ count }} Vue 템플릿에서 ref로 생성된 변수를 사용할 때는 .value를 사용하지 않아도 된다. Vue의 컴파일러가 이를 자동으로 처..
개요 Vue 3의 reactive 기능은 Composition API의 중요한 부분이며, 복잡한 객체를 반응형 데이터로 만드는 데 사용된다. reactive를 사용하면 객체의 모든 속성이 Vue의 반응형 시스템에 통합되어, 해당 객체의 속성이 변경될 때마다 Vue가 이를 감지하고 자동으로 UI를 업데이트한다. 기본 사용법 reactive 함수를 사용하여 객체를 반응형으로 만들기 위해선, 해당 함수에 객체를 전달한다. 이렇게 생성된 객체는 원본 객체와 동일한 속성을 가지지만, Vue의 반응형 시스템에 의해 추적된다. 아래 예시에서 state 객체는 reactive를 사용하여 생성된다. Increment Count is: {{ state.count }} Message: {{ state.message }} r..
개요 Vue 3에서 nextTick은 Vue의 반응형 시스템과 DOM 업데이트 사이클과 관련된 중요한 함수다. 이 함수는 Vue가 데이터 변경을 감지하고 해당 변경사항을 DOM에 반영한 직후에 실행되는 콜백을 스케줄링하는 데 사용된다. DOM 업데이트는 비동기적으로 수행되기 때문에, 데이터가 변경되었을 때 즉시 DOM이 업데이트되지 않을 수 있다. nextTick을 사용하면 Vue가 현재 렌더링 사이클에서 모든 DOM 업데이트를 완료한 직후에 특정 코드를 실행할 수 있도록 예약할 수 있다. 이는 DOM이 완전히 업데이트된 상태에서 작업을 수행해야 할 때 유용하다. 사용 사례 nextTick은 주로 다음과 같은 경우에 사용된다. 데이터 변경 후 DOM이 업데이트된 것을 확인하고 추가적인 DOM 조작이 필요..
개요 Vue 3의 Composition API에 포함된 markRaw 기능은 특정 객체를 반응형 시스템에서 제외하는 데 사용된다. 이 기능은 Vue의 반응형 시스템이 특정 객체를 추적하는 것을 방지하며, 때로는 성능 최적화나 특정 라이브러리와의 통합을 위해 필요하다. markRaw는 Vue가 제공하는 함수로, 이 함수로 객체를 감싸면 해당 객체는 Vue의 반응형 시스템에 의해 추적되지 않는다. 즉, 객체에 대한 변경사항이 발생해도, Vue는 이를 감지하지 않으며, 따라서 DOM 업데이트나 다른 반응형 동작을 트리거하지 않는다. 기본 사용법 markRaw를 사용하는 것은 매우 간단하다. 반응형 시스템에서 제외하고자 하는 객체에 markRaw 함수를 적용하면 된다. 이렇게 처리된 객체는 Vue의 반응형 시스..
include와 exclude 속성 Vue3의 keep-alive 컴포넌트는 include와 exclude 속성을 사용하여 특정 컴포넌트만 캐싱하거나 캐싱에서 제외할 수 있게 해준다. 이러한 속성들은 keep-alive의 유연성을 증가시키며, 성능 최적화와 메모리 사용 관리에 도움을 준다. include 이 속성을 사용하면, 캐싱할 컴포넌트를 지정할 수 있다. include에 지정된 컴포넌트 이름만 keep-alive에 의해 캐싱된다. 이는 문자열, 정규 표현식, 또는 컴포넌트 이름의 배열로 지정할 수 있다. exclude 반대로, exclude 속성을 사용하면 특정 컴포넌트를 캐싱에서 제외할 수 있다. exclude에 지정된 컴포넌트는 keep-alive에 의해 캐싱되지 않는다. 마찬가지로 문자열, 정..
Vue3에서 keep-alive는 컴포넌트의 상태를 보존하고 재사용할 수 있게 해주는 내장 컴포넌트다. 이 기능을 사용하면 Vue 인스턴스의 상태를 유지하면서 컴포넌트를 비활성화하고, 나중에 다시 활성화할 수 있다. keep-alive는 성능 최적화에 유용하며, 특히 사용자가 여러 페이지 간에 이동할 때 컴포넌트의 상태를 유지해야 하는 경우에 매우 효과적이다. keep-alive의 기능 컴포넌트 상태 보존: keep-alive는 내부에 포함된 컴포넌트의 상태를 메모리에 보존한다. 이를 통해 사용자가 컴포넌트를 다시 방문할 때 이전 상태를 그대로 복원할 수 있다. 성능 최적화: 컴포넌트를 매번 새로 생성하는 대신 재사용함으로써 렌더링 성능을 향상시킨다. 라이프 사이클 훅 활용: keep-alive를 사용하..
computed Vue 3의 computed는 반응형 시스템의 핵심 기능 중 하나로, 계산된 속성을 정의하는 데 사용된다. computed는 종속된 반응형 데이터에 기반하여 값을 계산하고, 이 값은 종속된 데이터가 변경될 때만 다시 계산된다. computed 속성은 데이터를 기반으로 한 계산을 수행한다. 이 계산은 의존하는 데이터가 변경될 때마다 자동으로 다시 수행된다. computed는 캐싱된 값을 반환하여, 의존하는 데이터가 변경되지 않았다면 다시 계산을 수행하지 않고 이전에 계산된 값을 사용한다. 이는 반복적인 계산에 대한 성능 최적화를 제공한다. 사용 사례 computed 속성은 다음과 같은 경우에 유용하다. 복잡한 계산 로직이 필요한 경우, 코드의 가독성을 높이고 재사용성을 개선하기 위해. 데이..
Vue.js에서 이벤트 핸들링 개선하기 Vue.js를 사용할 때, 종종 이벤트 핸들링을 위해 @click 같은 디렉티브를 사용한다. 조건에 따라 이벤트를 처리하는 방법을 살펴보자. 기존 코드 기존에는 아래와 같이 작성했다. 이 코드는 isCheckNeeded가 참일 때만 checkNav 함수를 호출하려고 시도한다. 하지만, 여기서 checkNav는 호출되지 않고 참조만 전달된다. 함수가 실행되지 않으므로 예상한 동작을 하지 않는다. 개선된 코드 이를 개선하기 위해, 함수 호출을 명확하게 하거나 다른 방식을 사용할 수 있다. 위 코드는 조건이 참일 때 checkNav()를 호출한다. 함수가 실행됨으로써 원하는 동작을 얻을 수 있다. 또는 다음과 같이 논리 연산자를 사용하여 코드를 더 간결하게 만들 수 있다..
