---
# System prepended metadata

title: Vue.js 기초 익히기 (2)
tags: [Vue.js 기초 익히기, 지호]

---

Vue.js 기초 익히기 (2)
===

###### tags: `지호`, `Vue.js 기초 익히기`

---

## 1. computed 속성

### computed
- 템플릿 내에 표현식을 넣으면 편리하지만 간단한 연산일 때만 이용하는 것이 좋고 많은 연산이 들어가면 유지보수가 어렵다
- 그래서 쓰는 것이 Computed 속성

### computed vs method
- computed는 캐싱을 하고 method는 하지 않는다
- 처음에 한 번만 계산되고 그 이후로 저장된 값을 계속 사용 (getter의 특성)
- ==반응형 getter==: data안에 값이 변경되면 그에 맞게 다시 계산하고 저장

![image](https://user-images.githubusercontent.com/24283401/161693432-03a46327-ca2e-4b35-ab45-d1e60d8e6721.png)

<br/>

## 2. watch 속성

### watch
- 대부분의 경우에는 computed 속성이 더 적합하지만 watch가 꼭 필요한 상황이 있음
- 뷰 인스턴스의 특정 프로퍼티가 변경될 때 지정한 콜백함수가 실행되는 기능
- getter처럼 아무 프로퍼티도 생성하지 않고 단순히 콜백함수로의 역할을 한다. 

![image](https://user-images.githubusercontent.com/24283401/161694857-87830aa4-349a-4dae-89c8-1e53a52e5954.png)

<br/>

## 3. 클래스와 스타일 바인딩

### 클래스 바인딩

![image](https://user-images.githubusercontent.com/24283401/161729476-3ed36011-60d7-44c6-bc61-4c244a4f2687.png)

그 외 방법들: https://kr.vuejs.org/v2/guide/class-and-style.html#HTML-%ED%81%B4%EB%9E%98%EC%8A%A4-%EB%B0%94%EC%9D%B8%EB%94%A9%ED%95%98%EA%B8%B0

### 스타일 바인딩

![image](https://user-images.githubusercontent.com/24283401/161730091-b4065c46-466b-467a-b08b-077038bd12d3.png)

그 외 방법들: https://kr.vuejs.org/v2/guide/class-and-style.html#%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EB%B0%94%EC%9D%B8%EB%94%A9

<br/>


## 4. 조건부 렌더링 

### v-if
- 조건에 따라 블록을 렌더링하기 위해 사용

![image](https://user-images.githubusercontent.com/24283401/161875788-158c93ed-6dff-4ac3-a02e-cb8fa37b7094.png)

<br/>

- 조건부 그룹 

![image](https://user-images.githubusercontent.com/24283401/161875924-31c1515e-9f09-492d-b291-3a0b58955a10.png)

- template: 보이지 않는 래퍼 역할
- v-else: v-if, v-else-if 바로 뒤에 있어야 한다.



- v-else-if 
    - v-if, v-else-if 바로 뒤에 있어야 한다.
![image](https://user-images.githubusercontent.com/24283401/161876359-27ae5d61-9c56-42a3-a6fe-2176d433a0f2.png)

<br/>

### v-show

![image](https://user-images.githubusercontent.com/24283401/161876583-ee7ec833-9260-46fe-bf0e-9944409e5b1b.png)


### v-if vs v-showw
- v-if
    - if 조건문이 false이면 아예 렌더링하지 않음
    - 토글 비용이 높음
    - 자주 조건값이 자주 바뀔 때 사용
- v-show는 
    - if 조건문이 false이면 렌더링은 하지만 style:none;으로 보이게 하지 않음
    - 초기 렌더링 비용이 높음
    - 런타임 시 조건이 바뀌지 않을 때 사용


<br/>

## 5. 리스트 렌더링

### v-for
- 배열을 기반으로 리스트 렌더링 가능

![image](https://user-images.githubusercontent.com/24283401/161896730-c887e495-3cb6-4222-b1d1-0009973f4f6e.png)

- v-for의 각 항목들에 고유한 key속성을 제공해야한다. 
- 각 항목을 식별할 수 있는 고유한 id
- key에 index를 넣으면 좋지 않음
    - 리스트의 원소가 추가/삭제됨에 따라 인덱스가 바뀌고 index도 바뀌기 때문
    - id가 있으면 id를 사용하는 것이 좋고, 없다면 다른 속성들의 값을 합쳐서 사용하기
- 객체 사용: https://kr.vuejs.org/v2/guide/list.html#v-for%EC%99%80-%EA%B0%9D%EC%B2%B4

<br/>

