[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기




이번 포스팅은 뷰 디렉티브중 하나인 v-for 에 대한 포스팅입니다.


제이쿼리와 비교하면 스크립트에서 for문 안에 append 기능을 합친것과 비슷하다고 보시면 되겠습니다.



제이쿼리로 동적으로 엘리먼트 추가할때마다 귀찮았는데


vue.js의 v-for을 이용하면 손쉽게 기능 추가가 가능해 집니다.




1. v-for 사용하기



우선 이전 포스팅과 마찬가지로 jsbin을 이용해


실습해 보도록 하겠습니다.


https://jsbin.com/qowolakowi/edit?html,js,output


해당 링크로 들어가면 이미 만들어진 실습코드에서 조금만 변경 하면 됩니다.


이전 포스팅을 참고하시면 더 좋습니다.





2018/02/19 - [Yame Programmer/VUE.JS] - [VUE.JS] VUE[뷰] 시작해보기

2018/02/22 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 사용해보기

2018/02/26 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 v-bind 사용하기






1) 기본 사용법



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="dataList in list">
      {{ dataList.text }}
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app'// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
list:[
  {text:"react 배워보기"},
  {text:"pyhton 배워보기"},
  {text:"vue 배워보기"},
  {text:"연봉을 올려보기"}
  ]
}
});
 
cs




결과




html 코드를 보시면


v-for="dataList in list"


라고 되어 있고



js쪽 코드를 보시면 list안에 오브젝트 배열로 데이터가 들어있습니다.


dataList in list 에서 dataList 는 가져온 데이터를 사용할 변수명 같은거고


list는 js에서 선언한 list 데이터 입니다.


jstl에서 for돌리는것과 비슷한 방법이라고 생각하시면 이해하기 쉽습니다.




2) index 사용하기



jstl의 for기능중에서 index 번호를 불러오는게 있는데


vue.js의 v-for에도 같은 기능이 있습니다.



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(dataList, index) in list">
      {{index}}  {{ dataList.text }}
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



1) 에서 작성한 코드중 data in list -> (dataList, index) in list 로 변경해주시고


{{}}로 index를 추가해 주시면





결과




이렇게 순서 번호가 나타나게 됩니다.


물론



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(dataList, index) in list">
      {{index+1}}  {{ dataList.text }}
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



이렇게 index에 바로 연산식을 사용해





이렇게 뽑아내는 것도 가능 합니다.






v-for 디렉티브를 사용해 배열 데이터를 동적으로 렌더링 하는 방법에 대해서 알아보았습니다.



이제 디렉티브는 데이터를 양방향으로 바인딩해주는 v-model과 이벤트 핸들링을 하는 v-on 


이렇게 두가지가 남았네요



다들 재밌게 개발 하시고


연봉들 많이 올라갔으면 좋겠습니다!




변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()


react 강좌를 보며 예제를 따라해보고 하던 도중


라이프사이클이나 실행유무 어떤 메소드가 먼저 실행되는지


여기에 있는 this와 저기에 있는 this 가 무슨 차이가 있는지


알아보기 위해 여기저기 온갖곳에 console.log를 사용하여


개발자모드 화면에서 콘솔들을 보는 도중


특정값이 바뀌는데도 맵안에 들어가 있는 녀석들을 전부 하나씩


다시 렌더링 한다는걸 알게 되었다


역시나 그에 대한 해답도 강좌에 마지막 부분에 써있었는데


기록해놔야 겠다 싶어서 포스팅을 한다



1
2
3
4
// 컴포넌트를 다시 렌더링 해야 할 지 말지 정의해준다
    shouldComponentUpdate(nextProps, nextState){
        return (JSON.stringify(nextProps) != JSON.stringify(this.props));
    }
cs




shouldComponentUpdate


요 함수가 다시 렌더링을 할지 말지 정의를 해주는데 리턴값을 보면


다음 props와 현재 props를 비교 해서 렌더링 할지 말지 정해주는 것 같다.


리턴이 true false로 가니 좀 더 다른 방법으로도 응용이 가능 할 것 같다.


ES6에는 생소한 문법들도 많고 평소 사용하던 방식과 너무나도 많이 달라 


react를 공부하는데 어려움이 엄청나게 많다. 


심지어 나는 bind나 this를 자주 사용하지 않았기 때문에 더 심한것 일수도...


현재 공부중인 리액트 예제들은


https://github.com/cheesu/react-tu


이곳에 올려놨으니 받아서 보는 것도 좋을 것이다.


왜냐하면 주석을 여기저기 엄청나게 달아놓고 console.log도 엄청나게 달아놨기 때문에 


혹여나 관심있는 사람들은 받아보면 도움이 될 것 같다.



+ Recent posts