[Udemy Vue 완벽가이드 Section3] 44. 데이터목록 렌더링

여러개의 요소가 있는 배열 goals를 출력하는 기능이 Vue에 있다.

목록으로 된 컨텐츠를 출력하는 작업은 앱에서 흔히 하는 동작 중 하나.

 

상품목록, 사용자의 'to do list'와 같은 list는 웹앱의 어디서나 찾을 수 있다.

<li>요소를 반복적으로 작성하여 모든 goals를 출력하려고 한다. → v-for

 

 

# v-for

v-if는 JavaScript의 if문,

v-for는 JavaScript의 for문과 같은 역할.

for문처럼 반복된 코드를 처리한다.

 

v-for에 값을 설정하면 되는데, 다른 Vue 기능처럼 큰 따옴표 안에 JavaScript 표현식을 입력한다.

""안에 goals를 입력하여 data 프로퍼티인 배열 goals를 가리킨다.

JS에서는 "const goal of goals" 라고 for문을 작성한다.

 

 

Vue에서도 유사하게 'goals'를 작성해 출력하지만, goal을 각각 찾아서 li태그 사이에 각 goal의 텍스트를 출력해야한다.

v-for 구문은 'goal in goals'라고 작성.

 

<li v-for="goal in goals"></li>

goal of goals라고 작성해도 되지만, goal in goals가 더 정확하다. JS의 표준 for문과 다른 점이라고 할 수 있겠다.

v-for 이용시에는 in을 써서 배열에 loop 동작을 걸어야한다.

'goal'부분은 임의로 설정 가능하다. 'g', 'go', 'hello' 등 원하는대로 입력해도 된다.

 

 

v-for은 goals의 모든 값을 확인해 각 'goal'에 접근한다.

이 코드의 goal값은 문자열이다. <li></li>사이의 이중 중괄호 안에 goal을 입력하여 해당 값을 출력하도록 설정한다.

<li v-for="goal in goals">{{ goal }}</li>

앞에서 goal을 썼다면, 이중 중괄호 안에도 goal을 사용해야 한다.

 

 

이렇게 입력하면 Vue를 통해 이 li요소를 모든 goal에 대해 반복 작성한다.

즉, goal 수만큼 li요소를 반복 렌더링한다.

 

v-for이 제어하는 요소 내에서 즉, 해당 요소의 여닫는 태그 사이와 요소 그 자체에서만 goal에 접근할 수 있다.

해당 li요소 밖에서는 goal에 접근 불가.

<p>{{ goal }}</p> <!--v-for를 쓴 li요소 밖이므로 여기서는 goal 출력x-->
<ul>
 <li v-for="goal in goals">{{ goal }}</li>
</ul>

 

일반 JavaScript의 for문을 봐도, 해당 for문 내에 있는 상수를 for문 외부에서는 사용할 수 없다.

for(const goal of goals){
//...
}

 

 

이렇게 설정한 v-for는 goal개수만큼 li요소를 작성하며, 해당 li태그 사이에 있는 goal의 텍스트를 출력한다.

실행해보면, 새 항목이 추가될때마다 list가 늘어나는 것을 볼 수 있다.

 

이렇게 v-for는 동적 애플리케이션을 구축할 때 유용하다. 컨텐츠목록을 렌더링하고 변경시에 업데이트 할 수 있기 때문.

Vue가 똑똑한 방법으로 update해준다.

 

# 개발자도구

개발자도구로 li요소를 보면, DOM에서는 업데이트되는 부분만 반짝거린다.

 

이미 goal이 2개 있고, Add goal버튼을 클릭하여 하나 더 추가해보자.

goal을 하나 더 추가해도 이미 렌더링된 li요소는 깜빡거리지 않는다. 새로 추가한 li요소만 깜빡거린다. 이게 바로 Vue가 DOM을 업데이트하는 방식.

 

변한게 없는 li요소는 그대로 두고, 새 li요소만 추가. 성능면에서 상당히 뛰어나다.

li요소가 추가될때마다 전체 list를 리렌더링한다면 성능이 저하될텐데, Vue 덕분에 그럴 일이 없다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.