[TIL 10] Vue.js 기초와 Template

nini·2025년 3월 19일

JavaScript KB KB it's your life TIL node.js vue.js

KB IT's Your Life

목록 보기

10/40

Vue.js 기초

보간법

보간법이란...

프로그래밍에서 데이터를 템플릿이나 문자열 내에 삽입하는 방법

Vue.js에서는 주로 HTML 템플릿 안에서 JavaScript 데이터를 동적으로 삽입할 때 사용된다. 간단히 말해서, 보간법은 템플릿 내에서 변수를 사용하여 동적으로 값을 출력하는 방법이다. 예를 들어, 사용자가 입력한 값을 텍스트로 화면에 출력하거나, 변수의 값을 HTML 속성에 동적으로 반영할 때 유용하다!

<p>{{ message }}</p>

여기서 {{ message }}는 message라는 변수를 템플릿 안에 삽입하는 보간법이다. Vue.js는 이 구문을 사용하여 message에 해당하는 데이터를 화면에 출력한다.

보간법을 사용하는 이유?
1. 동적 업데이터: Vue.js에서 데이터가 변경되면 해당 데이터를 사용하는 템플릿도 자동으로 업데이트된다.
2. 코드 간결성: 템플릿 내에서 JavaScript 코드와 데이터를 직접적으로 삽입할 수 있어서 코드가 간결해지고 가독성이 좋아진다.

보간법의 종류?
1. 텍스트 보간법: 데이터를 텍스트로 삽입
예: {{ variable }}
2. 속성 바인딩: HTML 요소의 속성에 데이터를 삽입
예: <img v-bind:src="imageSrc">
3. 양방향 바인딩(v-model): 입력값을 데이터와 연결하여 양방향으로 동기화

=> 보간법은 Vue.js에서 데이터를 HTML 요소에 반영하는 방법이다!

Vue.js와 MVVM 패턴
모델(Model)을 변경하면 뷰모델(ViewModel) 역할을 수행하는 Vue 인스턴스를 통해 즉시 UI를 변경한다.

기본 디렉티브

Vue 디렉티브(directive 지시자)
- v-로 시작하는 속성
- HTML 요소와 관련된 작업을 지정
v-text, v-html 디렉티브
- 텍스트 출력
  - v-text, {{}}: innerText 속성에 연결됨, 내용을 text로 출력, html 태그 문자가 있는 경우 이스케이프됨
  - v-html: innerHTML 속성에 연결됨, 내용을 html로 출력, html 태그

	- 이스케이프란? HTML 태그 문자가 그대로 렌더링되지 않도록 "변환"하는 과정이다. 예를 들어, `<div>` 같은 태그가 실제 HTML로 해석되지 않고 텍스트로 그대로 출력된다.
	- {{ }} (문자열 보간법): 템플릿 안에서 데이터를 텍스트로 출력하지만, HTML 태그를 이스케이프하여 HTML 태그가 표시되지 않고 텍스트로만 보임
	- v-text: {{ }}와 비슷하지만, HTML 태그도 텍스트로 출력된다. 즉, HTML 코드가 그대로 표시됨

v-bind 디렉티브
- 요소의 속성을 바인딩
- 속성값을 문자열이 아닌 자바스크립트 표현식으로 처리됨
- 형식
  - <태그명 v-bind:속성="표현식">
  - <태그명 :속성="표현식">
- v-bind의 특징? 단방향!
  - Vue 인스턴스의 데이터나 속성이 바뀌면 UI를 갱신
  - 화면의 바인딩된 요소에서 값을 변경하더라도 데이터는 변경되지 않음
- 축약 표현? v-bind:src -> :src

v-model 디렉티브

v-model 기본 사용법
- 양방향 데이터 바인딩
  - 속성값 변경시 -> UI 변경됨
  - UI 입력값 변경시 -> 속성값 변경됨
- 주로 form 요소에 바인딩
  - input, select, textarea emd
- <태그명 v-model="속성">
checkbox와 v-model 바인딩
- 다중 선택 시 -> 배열 속성에 바인딩
- 단일 선택 시 -> 단일 속성에 바인딩
  - 디폴트 값: true/false
  - true-value, false-value로 값 지정
수식어(modifier)
- v-model 디렉티브에 특별한 기능을 추가
- lazy, number, trim

    <input type="text" v-model.lazy="name" /> 
	<!-- input에서 엔터를 치거나 포커스 이동했을 때 입력값과 속성을 동기화 --> 

	<input type="text" v-model.number="num" />
	<!-- 문자열을 숫자로 자동 형변환시켜 속성에 반영 -->

	<input type="text" v-model.trim="message" />
	<!-- 문자열의 앞뒤 공백을 자동으로 제거 -->

v-model의 한글 처리 문제
- 값을 받아내는 시점이 한글 한 글자가 입력이 완료될 때 처리됨
- 해결 방법
  - v-model을 사용하지 않음
  - v-bind를 이용해서 바인딩
  - 입력 이벤트(input)가 발생했을 때 이벤트 핸들러에서 속성 데이터에 반영

    <div id="app">
    	<input type="text" :value="name" @input="changeName" /> // : 는 v-bind 의미
      <br />
      이름: <span>{{name}}</span>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
    	let vm = Vue.createApp({
    		name: 'App',
    		data() {
    			return { name: '' };
    		},
    		methods: {
    			changeName(e) {
    				this.name = e.target.value;
    			},
    		},
    	}).mount('#app');
    </script>

조건 렌더링 디렉티브

v-show
- 화면에 보여줄지 말지를 결정하는 디렉티브
- HTML 요소는 생성하지만 화면에 보여주지 않을 수 있음
- v-show에 부여된 조건이 true일 때만 화면에 보여줌
  - 요소가 렌더링된 상태에서 단순히 숨기기만 함
v-if
- 조건에 부합되지 않는 경우, 요소를 생성하지 않음(렌더링 수행X, 화면에 출력X)
- v-else, v-else-if 함께 사용

- UI 상태 변경이 잦다면 'v-show' 사용 -> 단순히 'display: none;' 처리하므로 DOM 조작 비용이 적음
- 요소를 아예 추가/제거해야 한다면 'v-if' 사용 -> 필요할 때만 렌더링하므로 성능상 유리

태그 자체가 없다가 생김 v-if의 경우!!

반복 렌더링 디렉티브

v-for 디렉티브
자바스크립트의 for문과 유사
반 복적인 데이터를 렌더링하기 위해 사용
- 형식(배열 사용시) <태그명 v-for="변수 in 배열" :key="id값">
- 형식(객체 사용시) <태그명 v-for="(val, key) in 객체" :key="key">
<인덱스 번호가 필요한 경우>
- 형식(배열 사용시) <태그명 v-for="(contact, index) in contacts" …>
- 형식(객체 사용시) <태그명 v-for="(val, key, index) in regions" …>
여러 요소를 묶어서 반복 렌더링하기
- <template> 요소에 v-for 디렉티브 사용 <template v-for=”…”>
- template 태그는 렌더링 내용에는 포함되지 않음, 단지 요소들을 그룹으로 묶어주기 위한 용도로만 사용됨
v-for 디렉티브와 key 속성
- v-for 디렉티브에서 :key="c.no"와 같이 지정된 부분을 말함
- 배열을 렌더링할 때 데이터 변경없이 위치가 바뀌는 경우
  - key 속성이 없으면 → 전부 다시 렌더링
  - key 속성이 있으면 → 위치만 변경
    
    → key 특성에는 인덱스 번호를 부여하지 않음. 반드시 고유한, 변경되지 않는 값을 부여
    → 가급적이면 key 특성을 부여하도록 하고, 반복 렌더링되는 각각의 요소 노드를 추적하고 요소를 재사용할 수 있도록 key 특성에 반드시 고유 값을 바인딩 해주기!

데이터 변경 시 주의사항

Proxy 객체
- 데이터의 변경사항을 감시하며, 값 변경 시 렌더링을 다시하도록 유도
- Vue 인스턴스의 data 옵션으로 지정한 객체
- data로 지정된 객체는 모두 proxy로 래핑됨
Proxy의 배열의 메서드
- 배열의 데이터를 변경하는 메서드들도 래핑되어 있음
- psuh(), splice(), sort() 등
  
  → 배열의 내용 변경시 watcher에게 변경을 알려서 다시 렌더링을 일으킴