반복문

동일한 문구가 반독될 때 반복문 사용을 한다. 예를 들어서 네비 상단바에 있는 각 태그들은 <a>Home</a>, <a>Shop</a> , <a>About</a> 와 같이 a태그의 반복으로 구성되어 있다. 중복코드 작성을 줄이기 위해서 v-for라는 문법을 사용해 보려 한다.

v-for

<a v-for="(k,i) in menu" :key="i">{{k + i}}</a>

...

export default {
  name: 'App',
  data(){
    return{
      ...
      menu : ['Home', 'Shop', 'About'],
    }
  },
  components: {
  }
}

위 코드는 v-for를 사용한 코드이다. v-for는 for문과 매우 유사한 성격을 띄고 있다. 먼저 태그 안에 속성값처럼 선언을 한다.

in을 기준으로 좌우가 나누어지는데 위 코드상으로 좌측에 (k,i) 우측에 menu가 존재한다.

in 우변 (menu)

먼저 우측에 menu는 반복문이 실행될 횟수를 의미한다. 해당 부분에 숫자로 반복문의 횟수를 정의 해도 되지만 위 코드와 같이 변수를 할당하여 선언해줄수 있다.

아래 data쪽에 menu라는 배열을 선언 해 놨고, 해당 배열의 크기는 3이다. 그러면 자동적으로 for문이 3번 동작한다는 뜻이 된다.

in 좌변 (k,i)

다음으로 in 좌변을 보면 k와 i가 있다.

먼저 k는 a,b,c 와 같은 변수로 작명하여 선언하면 된다. 이 변수는 해당 for문을 돌면서 우변에 선언된 횟수만큼 변하게 된다. 우변에 선언된 값이 특정 배열과 같은 변수라면 배열에 담긴 값을 순서대로 꺼내게 되고, 일반 숫자라면 1,2,3..N 과 같이 우변에 선언된 N까지 증가하게 된다.

다음으로 i는 :key에서 한번더 불러지는것을 볼 수 있다. 이는 해당 태그가 for문을 돌면 해당 i값이 1씩 증가하게 되고, 이는 고유 번호처럼 동작을 한다. 내가 이해한 바로는 html의 id 와 유사한것으로 이해했다.

<우변이 특정 숫자 N일때>

k값이 1씩 증가하는것을 볼 수 있다.

<a v-for="(k,i) in 3" :key="i">{{k}},{{i}}</a>

<우변이 변수(배열)일 때>

k값이 menu에 선언된 값으로 바인딩되는것을 볼 수 있다.

<a v-for="(k,i) in menu" :key="i">{{k}},{{i}}</a>

위 두 예시 모두 i 값이 자동으로 증가한다는 것을 보여주기 위해 i값도 바인딩 하여 표시를 해주었고, 그 결과 1씩 증가하는 모습을 확인할 수 있다.