Vue Composition API로 배열 데이터에 segNo 추가하기

안녕하세요! 오늘은 Vue.js의 Composition API를 사용해서 배열 데이터에 순차적인 번호(segNo)를 추가하는 방법을 알아보겠습니다. 주어진 데이터는 pereson = [{name:'Jhon', age: 20}, {name:'Tom', age:23}]이고, 여기에 segNo를 추가해서 각 객체에 고유한 번호를 부여해보겠습니다. 코드 설명은 초보자도 쉽게 따라 할 수 있도록 단계별로 진행하겠습니다.

목표

• pereson 배열에 segNo 속성을 추가
• segNo는 1부터 순차적으로 증가하는 번호로 부여
• Vue Composition API를 사용해 구현

1. 기본 환경 설정

먼저 Vue 프로젝트에서 Composition API를 사용하기 위해 <script setup> 형식을 사용하겠습니다. <script setup>은 Composition API를 간결하게 작성할 수 있는 syntactic sugar입니다.

728x90

2. 코드 예제

아래는 pereson 배열에 segNo를 추가하는 예제 코드입니다.

<template>
  <div>
    <h1>사용자 목록</h1>
    <ul>
      <li v-for="person in pereson" :key="person.segNo">
        {{ person.segNo }}. {{ person.name }} (나이: {{ person.age }})
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 반응형 데이터 선언
const pereson = ref([
  { name: 'Jhon', age: 20 },
  { name: 'Tom', age: 23 }
]);

// segNo 추가 함수
const addSegNo = () => {
  pereson.value = pereson.value.map((person, index) => ({
    ...person,
    segNo: index + 1
  }));
};

// 컴포넌트가 마운트될 때 실행
onMounted(() => {
  addSegNo();
});
</script>

<style>
/* 스타일은 생략 */
</style>

3. 코드 설명

1. ref로 반응형 데이터 생성
   pereson 배열을 ref로 선언하여 반응형 데이터로 만듭니다. Vue에서 반응형 데이터를 다룰 때는 ref 또는 reactive를 사용하며, 여기서는 배열을 다루기 위해 ref를 선택했습니다.
2. addSegNo 함수
   map 메서드를 사용해 배열의 각 객체에 segNo를 추가합니다. index + 1을 사용해 번호가 1부터 시작하도록 설정했습니다. ...person은 기존 객체의 속성(name, age)을 유지하면서 새로운 속성(segNo)를 추가하기 위한 스프레드 연산자입니다.
3. onMounted로 초기화
   컴포넌트가 DOM에 마운트된 후 addSegNo 함수를 호출해 segNo를 추가합니다. 이렇게 하면 페이지가 로드되자마자 번호가 부여된 데이터를 볼 수 있습니다.
4. 템플릿에서 렌더링
   v-for 디렉티브를 사용해 pereson 배열을 순회하며 각 객체의 segNo, name, age를 표시합니다. :key는 segNo를 사용해 고유성을 보장합니다.

 

 

4. 결과

위 코드를 실행하면 화면에 다음과 같이 표시됩니다:

사용자 목록
- 1. Jhon (나이: 20)
- 2. Tom (나이: 23)

5. 추가 팁

• 동적 데이터 처리: 만약 pereson 배열이 외부 API에서 받아오는 데이터라면, 데이터를 받아온 후 addSegNo를 호출하도록 로직을 수정하면 됩니다.
• 재사용성: addSegNo 함수를 별도의 유틸리티 파일로 분리해 다른 컴포넌트에서도 사용할 수 있습니다.

마무리

Vue Composition API를 사용하면 직관적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 이번 예제에서는 간단한 배열에 번호를 추가하는 방법을 배웠는데요, 이 기법을 응용하면 더 복잡한 데이터 처리도 쉽게 할 수 있습니다. 질문이 있다면 언제든 댓글로 남겨주세요!