내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
가상화
@sectile/virtual은 항목의 크기와 순서가 계속 바뀌는 대규모 화면을 배치합니다. 실제 요소가 나타나면 브라우저에서 크기를 읽고, 달라진 지점부터 뒤쪽 좌표를 갱신합니다. 목록 앞쪽에서 삽입·삭제·이동이 일어나도 현재 읽고 있는 항목의 화면 위치를 함께 보정합니다.
설치
상단의 사용 환경에서 선택한 환경에 필요한 패키지만 표시합니다.
pnpm add vue @sectile/vue @sectile/virtual동적 높이 목록
아래 목록에는 높이가 서로 다른 행 50,000개가 있습니다. Sectile은 화면 주변의 행만 만들고 실제 DOM 높이를 자동으로 반영합니다. 설정은 상단의 사용 환경을 따르며, 코드 탭에는 현재 환경의 구현만 표시됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
<script setup lang="ts">
import { VirtualList } from '@sectile/vue/virtual/list'
const rows = Array.from({ length: 50_000 }, (_, index) => ({
id: `row-${index}`,
title: `Row ${index + 1}`,
lines: Array.from(
{ length: 1 + (index % 3) },
() => 'Content determines this row height.',
),
}))
</script>
<template>
<VirtualList
:items="rows"
:get-key="row => row.id"
>
<template v-slot="{ value: row }">
<article>
<h3>{{ row.title }}</h3>
<p v-for="(line, lineIndex) in row.lines" :key="lineIndex">
{{ line }}
</p>
</article>
</template>
</VirtualList>
</template>Sectile이 맡는 일
- 실제 크기 반영: 고정 높이나 항목별 높이 계산 함수를 준비하지 않아도 렌더된 요소의 크기를 사용합니다.
- 부분 재배치: 하나의 높이가 달라지면 영향을 받는 구간부터 좌표를 갱신합니다.
- 위치 유지: 삽입·삭제·이동과 크기 변경 전후의 기준 항목을 비교해 스크롤 보정값을 적용합니다.
- 큰 2차원 화면: 목록뿐 아니라 행·열 격자, 벽돌형 카드, 자유 좌표 화면에도 같은 조회·측정 흐름을 사용합니다.
화면에 맞는 배치
| 화면 | 배치 | 자세히 |
|---|---|---|
| 한 방향으로 이어지는 목록 | 선형 | 선형 목록 |
| 가로와 세로가 모두 큰 셀 화면 | 트랙 격자 | 격자·벽돌형·자유 좌표 |
| 높이가 다른 카드 모음 | 벽돌형 | 격자·벽돌형·자유 좌표 |
| 좌표를 앱이 가진 캔버스 | 자유 좌표 | 격자·벽돌형·자유 좌표 |