Reactivityreactive()반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있다.객체타입에만 반응한다.기본타입(number, string, boolean)을 반응형으로 만들기 위해서 ref 메서드를 사용한다.예시⬇️⬇️ 실행결과 ⬇️⬇️ ref변이가능한 객체를 반환한다.이 객체에는 value라는 하나의 속성만 포함한다.value 값은 ref() 메서드에서 매개변수로 받은 값을 갖고 있다.이 객체는 내부의 value 값에 대한 반응형 참조 역할을 한다.예시⬇️⬇️ 실행 결과 ⬇️⬇️템플릿에서 ref에 접근할 때는 .value를 빼고 작성해도 잘 작동한다. toRef/toRefs예시 : 일반적인 구조분해할당⬇️⬇️ 실행 결과 ⬇️⬇️⬇️⬇️ 콘솔 실행 결과 ⬇️⬇️콘솔 실행..

텍스트 보간법데이터 바인딩데이터 바인딩의 가장 기본형태는 {{ data }}를 사용하는 것이다.{{ }} 안에는 data뿐만 아니라 JavaScript 표현식도 사용 가능하다.{{ message }}와 같이 사용하면 컴포넌트 인스턴스의 message 값으로 대체된다.message 속성이 변경될 때마다 갱신된다. v-once한 번만 렌더링을 하고 데이터가 변경되어도 갱신되지 않게하기 위해 사용한다.일회성 보간을 수행한다.예시 두 데이터 바인딩의 차이예시⬇️⬇️ 실행 결과 ⬇️⬇️ v-htmlv-html 디렉티브를 이용하여 실제 HTML로 출력할 수 있다.웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점으로 이어질 수 있어서 신뢰할 수 있는 콘텐츠에서만 사용하여야 한다.예시⬇️⬇️ 실행 ..

Composition API 사용을 위한 진입점 역할을 한다.라이프사이클(lifecycle)에서 컴포넌트 인스턴스가 생성되기 전에 실행된다.반응형 API를 사용하여 반응형 상태를 선언하고 setup()에서 객체를 반환하여 에 노출시킬 수 있다.setup()의 첫 번째 매개변수는 props이고, 두 번째 매개변수는 setup context 객체이다.예시⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️ setup() 안에서 반응형 상태를 선언하고 객체로 반환하게 되면 template과 컴포넌트 인스턴스에서 사용할 수 있다.이 때 setup() 안에서 반응형 상태를 선언했으면, 반드시 return을 해주어야 한다.메서드 또한 반응형 상태와 마찬가지로 사용방법이 똑같다. propssetup 함수의 첫 번째 매개변수이고, ..

Composition API는 옵션(data, methods, ...)을 선언하는 대신 가져온 함수(ref, onMounted, ...)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.Composition API는 성격에 따라 반응형 API(Reactivity API), 라이프 사이클 훅(Lifecycle Hooks), 종속성 주입(Dependency Injection) API로 구분된다. 반응형 API(Reactivity API)반응하는 데이터와 관련된 API 세트이다.예를 들어 ref(), isRef(), reactive()와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태), watchers(감시자)와 같은 것들을 만들 수 ..

모듈자바스크립트 코드를 재사용할 수 있도록 분리한 파일을 모듈이라고 한다. 컴포넌트UI를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다. 컴포넌트를 사용하는 이유컴포넌트를 사용하면 UI를 재사용할 수 있다.프론트엔드 개발을 하다보면 반복적으로 사용하는 코드들이 있는데, 이런경우 컴포넌트로 캡슐화 하여 필요한 곳에서 사용할 수 있다. 컴포넌트를 사용하여 UI를 독립적으로 나눔으로써 코드를 클린하게 할 수 있다.프론트엔드 개발을 하다보면 코드가 길어져 유지보수가 힘들 수 있는데, 이럴 때 컴포넌트로 독립적으로 분리함으로써 코드를 간결하게 하여 유지보수에 용이하다. 컴포넌트 없이 사용해보기 ⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️짧은 코드이지만 긴 코드라고 가정한다면 위의 코드는 가독성이 떨어지고, 반복되는..

UI 개발을 위한 JavaScript 프레임워크이다.HTML, CSS, JavaScript를 기반으로 이루어져있고,이것들을 기반으로 웹 애플리케이션을 보다 쉽고, 효율적으로 개발하는데 도움을 준다. JavaScript와 Vue의 차이선언적 렌더링(Declarative Rendering)Vue는 템플릿 구문( {{ 데이터 }} )을 활용하여 데이터를 선언적으로 출력(렌더링) 할 수 있도록 한다. 반응성(Reactivity)Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트한다. React와 Vue의 공통점/차이점공통점가상 DOM을 사용한다.반응적이고 조합 가능한 컴포넌트를 제공한다.라우팅 및 전역상태를 관리하는 라이브러리가 있다. 차이점React는 ..