Vue 기초 : 리스트 렌더링

(깊게 파고들면 기초라 할 수 있을지 모르겠지만 할튼 사용법으로는 기초에 해당할 수 있는 리스트 렌더링 사용법)

 

점심 메뉴를 고르기 위한 선택지를 만들어봅시다.

전달받은 메뉴 선택지는 아래와 같습니다.

opts: ["국밥", "햄버거", "돈가스", "자장면"]

 

우선 데이터가 아래와 같이 들어온다고 치고,

  data() {
    return {
      opts: ["국밥", "햄버거", "돈가스", "자장면"],
    };
  },

 

컴포넌트 이름은 option-selector 라고 하겠습니다.

name: "option-selector"

 

스크립트 영역은 그럼 이렇게 되겠죠.

<script>
export default {
  name: "option-selector",
  data() {
    return {
      opts: ["국밥", "햄버거", "돈가스", "자장면"],
    };
  },
};
</script>

 

이제 컴포넌트의 템플릿을 작성해봅시다.

우선 root 태그 하나 만들어주고,,

 

<template>
  <div class="form-group">
  </div>
</template>

 

이 form-group 이라는 div 태그안에 opts array 정보를 담은 radio input들을 생성해줄겁니다.

<template>
  <div class="form-group">
    <div v-for="(opt, index) in opts" :key="`opt-${index}`">
      <label>{{ opt }}</label>
      <input type="radio" name="vote" :value="opt" />
    </div>
  </div>
</template>

v-for"(opt, index) in opts"

opt에는 opts array의 element 값 하나하나가 들어오고 , index는 말그대로 해당 element의 index값입니다.

우리는 이 opt와 index 값을 자식 태그에 활용할 수 있습니다.

위에서는 label 태그의 컨텐츠 내용으로도 쓰였고, input의 value로도 opt가 사용되었네요.

 

v-for key

index와 같은 경우는 고유한 값을 표현하기 위한 id 값이나, key 값에 활용할 때 유용합니다.

특히나 v-for를 사용할때 key 지정이 필수로 요구되는데, 이 key는 꼭 고유한 식별값이어야 합니다. 

그래야만 Vue가 element와 그 DOM 상태 변화(?)를 각각 별도로 인지할 수 있습니다. (결론 : 효율적인 re-rendering을 위해)

자세한 설명은 https://deepsource.io/blog/key-attribute-vue-js/

 

그럼 컴포넌트의 총 코드는 아래와 같습니다.

<template>
  <div class="form-group">
    <div class="opt" v-for="(opt, index) in opts" :key="`opt-${index}`">
      <label>{{ opt }}</label>
      <input type="radio" name="vote" :value="opt" />
    </div>
  </div>
</template>

<script>
export default {
  name: "option-selector",
  data() {
    return {
      opts: ["국밥", "햄버거", "돈가스", "자장면"],
    };
  },
};
</script>

 

만든 컴포넌트를 부모 컴포넌트에서 불러와 확인해봅시다.

<template>
  <div id="app">
    <h1>먹고 싶은 메뉴 골라</h1>
    <option-selector />
  </div>
</template>

<script>
import OptionSelector from "./components/option-selector.vue";

export default {
  name: "App",
  components: {
    OptionSelector,
  },
};
</script>