실전 코드로 배우는 Vue.js

71

CHAPTER 02

Vue의 기본 작동 방식

출력 결과는 [그림

2

-

15

]와 같다.

그림

2-15

객체 프로퍼티 출력 결과 객체 프로퍼티 출력 결과

다음 구문과 같이 세 번째 인수로

index

를 설정하면 각 프로퍼티 쌍의 색인에 접근할 수

있다.

v-for = "(value, name, index) in collection"

앞서 언급했듯이, 각 순회 원소는

key

속성값을 정의해야 한다. 이 속성은 원소를 고유하게

바인딩하고 업데이트하는 데 매우 중요한 역할을 한다. 이어서 이러한

key

속성에 관해 살펴

보자.

2.11.2

key

속성과 원소 바인딩 고유성

Vue

엔진은

v

-

for

로 렌더링된 엘리먼트를 인플레이스 패치

in

-

place

patch

전략에 따라 추적하고

업데이트한다. 그러나 다양한 상황에 따라 리스트를 완전히 제어하거나 재배치해야 할 경우

가 있다. 또한 엘리먼트가 하위 컴포넌트의 상태에 영향을 받을 경우, 원치 않는 작동을 방지

할 필요가 있다.

이러한 이유로

Vue

는

key

라는 속성을 제공한다.

각 노드 엘리먼트의 고유

ID

인

key

는 순회

리스트 항목마다 각각 바인딩된다.

Vue

엔진은 인플레이스 패치

4

방식 대신

key

를 단서로

삼아 렌더링 노드와 하위 엘리먼트를 추적, 재사용, 재정렬한다.

4

옮긴이_

DOM

을 직접 조작하는 ...