Vue

React에서 Vue로 넘어가며 알게 된 상태 관리의 차이

Vue에서 디렉티브(Directive)란 v- 접두사가 붙은 특수 HTML 속성을 의미합니다.디렉티브는 템플릿에서 요소의 동작을 제어하거나 바인딩할 때 사용되며, Vue 템플릿의 핵심 기능 중 하나입니다.Vue의 디렉티브는 아래와 같이 4가지 구성 요소로 나뉩니다:Vu

v-bind와 v-on을 조합하면 사용자 입력에 따라 JavaScript의 값이 실시간으로 업데이트되도록 만들 수 있습니다. 아래 코드는 사용자가 input에 입력한 값을 inputText1 변수에 반영합니다.이처럼 v-bind는 input 요소의 값을 화면에 반영하고

지난 글에서는 Vue의 주요 디렉티브 중 하나인 v-model을 다뤘습니다. 특히 v-model을 통해 JavaScript와 HTML 간 양방향 바인딩이 얼마나 자연스럽게 이루어지는지를 확인할 수 있었습니다. 예를 들어, 사용자가 입력창에 특정 값을 입력하면 JS 변

지난 글에서는 method로 계산된 값을 사용하는 경우, Vue가 화면을 렌더링할 때마다 함수가 반복 실행되어 불필요한 계산이 발생할 수 있다는 점을 확인했습니다.이번 글에서는 이러한 상황을 어떻게 computed로 더 효율적으로 해결할 수 있는지 살펴보겠습니다.com

앞선 1, 2편에서는 computed와 method의 차이점과 각각의 사용 목적에 대해 알아보았습니다. computed는 의존하는 반응형 데이터가 변경될 때 자동으로 재계산되는 캐싱된 속성이었고, method는 호출 시마다 계산이 수행되는 일반 함수라는 점에서 차이가

앞서 우리는 Vue에서 상태와 계산, 부수 효과를 어떻게 다루는지 살펴봤습니다.그렇다면 이번엔, Vue의 화면을 구성하는 가장 기본 단위인 “컴포넌트”에 대해 알아보겠습니다.Vue에서의 컴포넌트(component)는 화면을 구성하는 독립적이고 재사용 가능한 UI 단위입