중첩된 {#each}와 키 기반 업데이트
중첩 목록을 처리하고 키가 지정된 each 블록으로 효율적인 DOM 업데이트를 보장합니다.
중첩된 {#each}와 키 기반 업데이트은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
2차원 데이터
표, 격자 또는 트리를 렌더링하려면 {#each} 블록을 중첩합니다.
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}각 단계의 키
효율적인 업데이트를 위해 모든 단계에 키를 추가합니다.
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}트리 구조
트리 형태의 데이터에는 재귀에 적합한 컴포넌트나 each 블록을 사용합니다.
인덱스 키 피하기
배열 인덱스를 키로 사용하면 중간에 항목을 삽입하거나 삭제할 때 문제가 발생합니다. 안정적인 id를 사용하는 편이 좋습니다.
변경 가능한 데이터의 함정
바깥 참조를 다시 할당하지 않고 중첩 배열을 변경하면 반응성이 깨집니다. 최상위에서 다시 할당합니다.
rows = rows.map(r => r.id === id ? {...r, name} : r);필터링과 정렬
필터링하거나 정렬할 때는 항상 새 배열을 반환합니다. 제자리에서 변경하면 업데이트가 트리거되지 않습니다.
sorted = [...items].sort();성능
키를 사용하면 항목을 추가하거나 삭제하거나 이동할 때 전체를 다시 렌더링하지 않고 O(n)의 비용으로 처리할 수 있습니다.
목록 재정렬
키를 사용하면 재정렬 애니메이션을 쉽게 적용할 수 있습니다. animate:flip과 함께 사용합니다.
내부 조건부 렌더링
각 항목에서 어떤 항목을 표시할지 세밀하게 제어하려면 {#if} 블록을 조합합니다.
항목마다 컴포넌트 사용하기
복잡한 항목은 자식 컴포넌트로 렌더링해 반복문의 본문을 간결하게 유지합니다.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}페이지 매김 패턴
긴 목록은 수천 개의 노드를 렌더링하는 대신 페이지 매김이나 가상화를 사용합니다.
빠른 확인
키에는 인덱스보다 안정적인 ID를 사용하는 편이 좋은 이유는 무엇인가요?
복습
2차원 데이터에는 each 블록을 중첩하고, 각 단계에 안정적인 ID로 키를 지정하며, 업데이트를 트리거하려면 컬렉션을 항상 다시 할당합니다.
자주 묻는 질문
“중첩된 {#each}와 키 기반 업데이트” 강의는 무료인가요?
네 — “중첩된 {#each}와 키 기반 업데이트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“중첩된 {#each}와 키 기반 업데이트”에서 뭘 배우나요?
중첩 목록을 처리하고 키가 지정된 each 블록으로 효율적인 DOM 업데이트를 보장합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“중첩된 {#each}와 키 기반 업데이트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- {#if} {#else if} {#else}
- 인덱스와 키를 사용하는 {#each}
- 다시 렌더링을 강제하는 {#key}
- 중첩된 {#each}와 키 기반 업데이트