v-for 디렉티브 사용하기

1. v-for 디렉티브란?

Vue에서 v-for 디렉티브는 배열이나 객체의 각 항목을 반복하여 렌더링할 때 사용합니다. JavaScript의 for...in 루프와 유사한 기능을 제공합니다.

2. 기본 구현 예제

HTML 구조

<div id="app">
    <ul>
        <li v-for="item in items">
            {{ item }}
        </li>
    </ul>
</div>

JavaScript 구현

Vue.createApp({
    data() {
        return {
            items: ['item1', 'item2', 'item3']
        }
    }
}).mount('#app');

3. 핵심 개념 설명

1. v-for 문법

• v-for="item in items": items 배열의 각 항목을 item으로 접근
• item은 반복되는 각 요소의 값입니다.

2. 렌더링 결과

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

3. 반응성

• items 배열이 변경되면 화면이 자동으로 업데이트됩니다.
• 배열에 항목을 추가하거나 제거하면 즉시 반영됩니다.

4. v-for의 다양한 사용법

1. 인덱스와 함께 사용

<li v-for="(item, index) in items">
    {{ index }}: {{ item }}
</li>

2. 객체 반복

data() {
    return {
        user: {
            name: 'John',
            age: 30,
            city: 'New York'
        }
    }
}

<div v-for="(value, key) in user">
    {{ key }}: {{ value }}
</div>

3. 숫자 반복

<span v-for="n in 10">{{ n }}</span>

5. key 속성의 중요성

<li v-for="item in items" :key="item">
    {{ item }}
</li>

• key 속성은 Vue가 각 요소를 고유하게 식별하는 데 사용됩니다.
• 배열의 순서가 변경될 때 성능 최적화에 도움이 됩니다.

6. 학습 포인트

• 배열 반복 렌더링
• 인덱스 활용
• 객체 반복
• key 속성의 역할
• 반응성과의 연동

7. 테스트 방법

1. 기본 동작 테스트

• 페이지를 열어서 리스트가 정상적으로 렌더링되는지 확인
• 각 항목이 올바른 순서로 표시되는지 확인

2. 콘솔에서 테스트

// 현재 items 배열 확인
console.log(app.items)

// 새로운 항목 추가
app.items.push('item4')

// 배열 순서 변경
app.items.reverse()

// 배열 필터링
app.items = app.items.filter(item => item.includes('item'))

3. 추가 테스트 케이스

// 객체 배열 테스트
data() {
    return {
        users: [
            { name: 'John', age: 30 },
            { name: 'Jane', age: 25 },
            { name: 'Bob', age: 35 }
        ]
    }
}

<li v-for="user in users">
    {{ user.name }} ({{ user.age }})
</li>

4. 동적 데이터 변경 테스트

// 배열 초기화
app.items = []

// 새로운 배열 할당
app.items = ['new1', 'new2', 'new3']

// 배열 중간에 항목 삽입
app.items.splice(1, 0, 'inserted')

5. 성능 테스트

// 대량의 데이터로 테스트
app.items = Array.from({length: 1000}, (_, i) => `item${i}`)