reese.dev

Vue 훑어보기

date
May 23, 2022
slug
start-vue
author
status
Public
tags
summary
type
Post
thumbnail
category
updatedAt
Mar 7, 2024 01:46 PM
  • props
  • v-model
  • 양방향 바인딩
 

props

뷰의 경우 컴포넌트로 화면을 구성하기에, 같은 웹 페이지라도 데이터를 공유할 수 없다.
컴포넌트 마다 자체적으로 고유한 유효 범위를 갖기 때문임.
각 컴포넌트의 유효 범위가 독립적이어서 다른 컴포넌트의 값을 직접적으로 참조할 수 없음.
따라서, 뷰에서 미리 정의된 데이터 전달 방식에 따라 일관된 구조로 작성하는 것 필요함.
 
  • 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때는 props속성을 사용
 
사용방법
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})
<blog-post :title="hello"></blog-post>
 
* 모든 prop들은 부모와 자식 사이에 단방향으로 내려가는 바인딩 형태임.
부모의 속성이 변경되면 자식 속성에게 전달되지만, 반대 방향으로는 전달되지 않음.
자식의 데이터가 부모에게 전달되는 것을 막는 것은 자식 요소가 의도치 않게 부모 요소의 상태를 변경함으로써 앱의 데이터 흐름을 이해하기 어렵게 만드는 일을 막기 위해서임.
또한, 부모 컴포넌트가 업데이트될 때 마다 자식 요소의 모든 prop들이 최신 값으로 새로고침됨. ⇒ prop을 자식 컴포넌트 안에서 수정해서는 안된다는 것.
만약 수정을 시도하는 경우, Vue는 콘솔에 경고를 표시.
 
prop을 자식 컴포넌트에서 직접 변경하고 싶을 때
  1. prop은 초기값만 전달하고, 자식 컴포넌트는 그 초기값을 로컬 데이터 속성으로 활용하고 싶은 경우 ⇒ 해당 경우에는 로컬 데이터 속성을 따로 선언하고 그 속성의 초기값으로써 prop을 사용하기.
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}
  1. 전달된 prop의 형태를 바꾸어야 하는 경우 ⇒ computed 속성을 사용하는 것.
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
*자바스크립트 오브젝트나 배열을 prop으로 전달하는 경우, 객체를 복사하는 것이 아니라 참조하게 됨. ⇒ 전달받은 오브젝트나 배열를 수정하게 되는 경우, 자식 요소가 부모 요소의 상태를 변경하게 되니 주의.
https://kr.vuejs.org/v2/guide/
 

V-model

Form 요소를 개발할 때 사용.
<input v-model="inputText">
new Vue({
  data: {
    inputText: ''
  }
})

v-model의 작동 원리

v-bind와 v-on의 기능의 조합
  • v-bind : 속성은 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용.
  • v-on : 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용.
 
HTML 입력 요소의 종류에 따른 v-model속성
(1) input -  value / input
(2) checkbox - checked / change
(3) select - value / change
 

v-model의 단점

빠르게 기능을 구현하고 프로토타이핑 해나갈 때는 v-model을 사용해도 상관지만 현재 시점에서는 IME 입력(한국어, 일본어, 중국어)에 대해서 한계점이 있음.
한글 입력의 경우 한 글자에 대한 입력이 끝나야지만 inputText 데이터가 인풋 박스의 텍스트 값과 동기화됨.
그래서 한국어를 사용할때엔 v-bind:value와 v-on:input를 직접 연결해 사용하는 것 권장.
 

관련 수식어

.lazy - 기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화하는데,
이 수식어를 통해 change 이벤트 이후 동기화되도록 할 수 있음.
<input v-model.lazy="msg" >
.number - 사용자 입력이 자동으로 숫자로 형변환 되기를 원할경우 사용.
<input v-model.number="age" type="number">
.trim - input을 자동으로 trim 하기 원할 경우 사용.
<input v-model.trim="msg">
 

양방향 바인딩

→ 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것.
(데이터가 변경되는 시점에 DOM 객체에 렌더링 해주거나 페이지 내에서 모델의 변경을 감지해 js실행부에서 변경함.)
 
- vue에서의 양방향 바인딩 ⇒ Vue 인스턴스와 component가 서로의 데이터에 접근하는 것
  • vue에서는 v-model과 v-on을 통해 양방향 데이터 바인딩을 함.
  • v-model은 DOM관련 내용을 잡아내며, vue가 바라보는 대상의 속성과 연결됨.
  • v-on은 이벤트를 잡아내는 데 사용함.