조건문과 반복문

Vue.js를 통해 조건문과 반복문을 사용하는 방법에 대해 살펴봅시다.

1. 조건문

1.1 코드 예시

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

위 예시는 이전 시간의 연장선상으로 숫자를 클릭하면 1씩 증가하는 내용입니다. 여기해 div 태그에 조건문을 코딩하였습니다.

1.2 v-if

<div v-if="count > 4">
    4보다 큽니다!
</div>

이는 1씩 증가하는 count 데이터가 4보다 크게 되면 4보다 큽니다! 라는 글자를 보이게 하는 조건문입니다. 이렇게 태그 옆에 조건문을 코딩할 수 있습니다.

v-로 시작하는 속성들을 디렉티브(directive)라 부릅니다.

2. 반복문

이번에는 반복문에 대하여 알아봅시다. 위에 기존에 있는 코딩 부분을 제외하고 추가한 부분만 명시하니 참고 부탁드립니다.

2.1 코드 예제

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>

2.2 v-for

<ul>
  <li v-for="fruit in fruits" :key="fruit">
    {{ fruit }}
  </li>
</ul>

이는 script 태그에서 명시한 배열 데이터인 fruits를 참고합니다. 태그에서 명시한 friut in fruits에서 배열 아이템의 개수만큼 {{ fruit }} 데이터를 순서대로 총 3번 반복하여 출력하도록 합니다. 그러므로 이러한 프레임워크의 반복문에서는 배열 데이터를 활용한다는 점 반드시 기억해야합니다.

덧붙여, 위와 같이 데이터를 반복할 때는 각각의 데이터가 고유한지를 증명해야 합니다. 이를 위해 key라는 속성을 : 콜론 기호와 함께 명시합니다. 이 부분에 고유하게 반복될 때마다 배열 데이터의 순서대로 입력될 수 있도록 제공하도록 합니다.

2.3 화면 출력

위와 같이 출력되는 것을 볼 수 있습니다.

3. 컴포넌트 활용

위와 같이 직접 App.vue에 코딩을 하는 것도 가능하지만, 이번에는 components에 코딩하여 import하는 방법으로 똑같은 화면을 출력해보도록 하겠습니다.

3.1 components 폴더 내 파일 생성

제목처럼 같이 components 폴더에 Fruit.vue 첫 글자가 대문자인 파일을 생성해줍니다.

3.2 Fruit.vue

<template>
  <li>{{ name }}</li> // props의 name
</template>

<script>
export default {
  props: {
    name: {
      type: String, // type 명시
      default: ''
    }
  }
}
</script>

<style scoped lang="scss"> // scoped는 현재 컴포넌트에 한해 스타일 적용하는 속성
  h1 { // scoped로 유효범위가 현재 Fruit 컴포넌트만이므로 적용이 되지 않음
    color: red !important;
  }
</style>

3.3 App.vue

<template>
<ul>
  <Fruit // components에 명시한 속성 이름 명시
    v-for="fruit in fruits"
    :key="fruit"
    :name="fruit"> // name 속성에 "fruit"
    {{ fruit }}
  </Fruit>
</ul>
</template>

<script>
import Fruit from '~/components/Fruit'

export default {
  components: {
    Fruit // Fruit: Fruit이나 속성과 데이터의 이름이 같다면 :뒤 생략 가능
  },
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>