장 볼 리스트 만들기
첫 번째로 만들 오늘의 “장 볼 리스트"입니다. 먼저 일단 HTML 코드에 직접 리스트를 쭉 적어보았습니다. 사야할 목록이 간소하기 때문에 이렇게 적더라도 사실 큰 무리가 없습니다. 하지만 만약 서버에서 100개의 게시글 리스트를 보내왔다면 이야기는 달라질것입니다. 이러한 상황을 대비해 v-for 디렉티브를 사용해 아래의 장 볼 리스트를 다시 작성해보겠습니다.
[JavaScript]
먼저 아래와 같이 장 볼 리스트를 list 라는 변수에 array 형태로 생성하였습니다.
[HTML]
그리고 이제 v-for 디렉티브를 사용하여 li를 반복하여 써봅시다. v-for 디렉티브는 아래와 같은 형식으로 작성합니다.
v-for="아이템명 in array"아이템명은 array가 반복되면서 불러올 요소 하나하나를 의미합니다. 새롭게 선언해주는 변수라고 생각하시고 아무 이름이나 쓰셔도 됩니다. 저는 여기서 item 이라고 정의해주었습니다. 그리고 in array는 실제적으로 반복을 할 데이터 묶음을 넣어주면 됩니다. 위에서 생성한 장 볼 리스트인 list 를 넣어줬습니다.
맨 처음 HTML 코드에 직접 li를 작성해준 것과 결과가 동일한 것을 확인할 수 있습니다.
v-for 내의 현재 index 값
위의 장 볼 리스트에서 반복되고 있는 리스트가 현재 몇 번째 반복인지를 확인하고 싶다면 어떻게 해야할까요? ul 대신 ol 태그를 사용하면 앞에 숫자가 표기가 되지만 만약 아래와 같이 숫자를 각 요소 뒤쪽에 써주고 싶다면 어떻게 해야할까요?
소갈비 (1)
감자 (2)
당근 (3)
.
.
.이러한 경우를 위해 v-for 디렉티브는 현재 반복되고 있는 반복문의 index 값을 제공해줍니다.
[HTML]
JavaScript 코드는 변경하지 않고 HTML 코드 내에 v-for 디렉티브에 새로운 값 i 를 넣었습니다.
v-for="( item, i ) in list"여기서 item은 실제로 반복되는 하나하나의 요소를 의미하며, i는 해당 요소의 반복 index(순서) 숫자를 표기해줍니다. item과 i 의 순서, 괄호를 꼭 잊지않고 지켜주셔야 오류가 나지 않으니 유의해주세요. 그리고 뒤에 {{ i }}를 넣어 값을 출력해보았습니다.
결과는 아래와 같이 리스트 뒤에 (숫자) 가 들어가있는 것을 확인하실 수 있습니다. 여기서 꼭 기억하고 넘어가셔야 하는 것은 index 값이 0 부터 시작된다는 사실! 꼭 기억해주세요.
string이 아닌 object의 반복
위에서 우리는 각 요소가 string인 array를 반복해 보았습니다. 이번에는 각 요소가 string 형태가 아닌 object 형태인 array를 반복해보겠습니다. 이번에는 가고 싶은 여행지 array를 정의하고 해당 여행지들을 리스트업해보겠습니다. 여행지 리스트는 다음과 같습니다.
어떤 차이가 있고 어떤 활용이 가능한지 생각하시며 아래의 예제를 확인해주세요.
[JavaScript]
위에서 이야기한 travelList를 data 내에 만들어주었습니다.
[HTML]
일단 아까 반복했던 방법 그대로 travelList를 반복하며 그 안의 리스트들을 반복해보겠습니다.
위의 결과에서 볼 수 있듯이 travelList 내의 각 object가 그대로 렌더링 되었습니다. 우리가 원하는 결과가 이런 것은 아닐 것입니다. 그럼 반복되는 v-for 안에서 각 값들을 나타내려면 어떻게 해야할까요?
[HTML]
li 태그 안을 살펴보시면city.name, city.distance 모두 반복되는 요소인 city 안의 속성들을 city.속성의 형태로 불러와서 사용하고 있습니다. 즉, 첫번째 요소인 {name: ‘강릉’, distance: ‘차로 3시간’} 에서 name에 해당하는 ‘강릉'이라는 값을 사용하고 싶다면 city.name 이라고 써주면 됩니다.
반응형 리스트, 그리고 key 값
마지막으로 조금은 어려울 수도 있는 내용을 다뤄보겠습니다. 요 부분이 이해가 가지 않더라도 사용하는데는 전혀 문제가 없으니 너무 걱정하시지 않으셔도 됩니다.
이런 예를 한번 들어보겠습니다. 여기 목욕탕집 주인이 있습니다. 사람이 오면 목욕탕 내의 라커키를 빌려주고 있습니다. 그런데 저기 한 구석에서 주인을 알 수 없는 라커키 하나를 발견했습니다. 여기서 목욕탕집 주인은 이 라커키의 주인을 어떻게 찾을 수 있을까요?
만약, 주인이 손님이 온 순서대로 첫번째 손님 1번 라커키, 두번째 손님 2번라커키, … 이렇게 적어놨다면 매우 난감할 것입니다. 정확하지 않을 수 있는 본인의 기억을 더듬어 n번째 손님을 찾아야하기 때문입니다. 다른 방법은 신분증과 라커키를 교환하고 신분증을 보관하는 방법입니다. 이 신분증의 주인은 1번 라커키, 저 신분증의 주인은 2번 라커키… 이런 방법으로 라커키와 신분증을 매칭 해둔다면 어떤 라커키를 주웠건 간에 해당 라커키와 연결된 신분증을 찾고 그 신분증을 이용해 손님을 찾으면 되니 이보다 확실한 방법은 없을 것 같습니다.
갑자기 왜 목욕탕이야기를 장황하게 했냐면 v-for 디렉티브로 반복되어 렌더링이 된 태그들을 vue가 기억할 수 있는 방법이 바로 key 값이기 때문입니다. 바로 위의 예에서 신분증의 역할을 하는 녀석입니다.
위의 예에서 v-for로 반복된 city들은 순서에 의해 travelList 내에서의 포지션을 찾습니다. 만약 여행을 가고 싶은 지역이 바뀌어서 세번째 지역을 다음과 같이바꾼다면
{name:'오이도', distance:'차로 1시간 반'}vue는 반복된 li에서 순서에 의해 변경된 값을 적용하려고 할 것 입니다. 하지만 이는 조금만 복잡한 구조를 가지거나 템플릿 내에서 재배열 되었다면 정확한 위치를 찾기는 매우 어려워집니다. 따라서 vue는 v-for 디렉티브에는 항상 유니크한 key 값을 선언해줄 것을 권하고 있습니다.
[HTML]key=“city.name” 이와 같이 city의 name 값을 유니크 key 값으로 정해줬습니다. 여기서는 travelList내에 중복된 name 값이 없으니 문제없이 동작합니다.
하지만 VueJS의 공식문서에는 각 리스트의 id 값을 선언해주는 것이 이상적이라고 코멘트하고 있으니 유의하시기 바랍니다.
여기까지 v-for 디렉티브에 대해 알아보았습니다. 정말 많이 사용되는 디렉티브이니 사용하시는데 어려움이 없도록 익숙해지는 것이 굉장히 중요한 디렉티브라고 생각합니다.
