목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
격자·벽돌형·자유 좌표
배치 방식은 화면이 가진 구조에 맞춰 고릅니다. 각 예제의 코드 탭은 상단 사용 환경 설정을 따릅니다.
트랙 격자
행과 열이 모두 독립적으로 큰 화면에는 트랙 격자를 사용합니다. 아래 예제는 300개 행 × 300개 열, 총 90,000개 셀을 같은 비중으로 만들었습니다. 가로와 세로를 모두 스크롤해도 현재 viewport와 overscan에 들어온 셀만 DOM에 존재합니다.
R7 · C1
R7 · C2
R7 · C3
R7 · C4
R7 · C5
R7 · C6
R7 · C7
R7 · C8
R7 · C9
R7 · C10
R7 · C11
R7 · C12
R7 · C13
R7 · C14
R8 · C1
R8 · C2
R8 · C3
R8 · C4
R8 · C5
R8 · C6
R8 · C7
R8 · C8
R8 · C9
R8 · C10
R8 · C11
R8 · C12
R8 · C13
R8 · C14
R9 · C1
R9 · C2
R9 · C3
R9 · C4
R9 · C5
R9 · C6
R9 · C7
R9 · C8
R9 · C9
R9 · C10
R9 · C11
R9 · C12
R9 · C13
R9 · C14
R10 · C1
R10 · C2
R10 · C3
R10 · C4
R10 · C5
R10 · C6
R10 · C7
R10 · C8
R10 · C9
R10 · C10
R10 · C11
R10 · C12
R10 · C13
R10 · C14
R11 · C1
R11 · C2
R11 · C3
R11 · C4
R11 · C5
R11 · C6
R11 · C7
R11 · C8
R11 · C9
R11 · C10
R11 · C11
R11 · C12
R11 · C13
R11 · C14
R12 · C1
R12 · C2
R12 · C3
R12 · C4
R12 · C5
R12 · C6
R12 · C7
R12 · C8
R12 · C9
R12 · C10
R12 · C11
R12 · C12
R12 · C13
R12 · C14
R13 · C1
R13 · C2
R13 · C3
R13 · C4
R13 · C5
R13 · C6
R13 · C7
R13 · C8
R13 · C9
R13 · C10
R13 · C11
R13 · C12
R13 · C13
R13 · C14
R14 · C1
R14 · C2
R14 · C3
R14 · C4
R14 · C5
R14 · C6
R14 · C7
R14 · C8
R14 · C9
R14 · C10
R14 · C11
R14 · C12
R14 · C13
R14 · C14
R15 · C1
R15 · C2
R15 · C3
R15 · C4
R15 · C5
R15 · C6
R15 · C7
R15 · C8
R15 · C9
R15 · C10
R15 · C11
R15 · C12
R15 · C13
R15 · C14
R16 · C1
R16 · C2
R16 · C3
R16 · C4
R16 · C5
R16 · C6
R16 · C7
R16 · C8
R16 · C9
R16 · C10
R16 · C11
R16 · C12
R16 · C13
R16 · C14
R17 · C1
R17 · C2
R17 · C3
R17 · C4
R17 · C5
R17 · C6
R17 · C7
R17 · C8
R17 · C9
R17 · C10
R17 · C11
R17 · C12
R17 · C13
R17 · C14
R18 · C1
R18 · C2
R18 · C3
R18 · C4
R18 · C5
R18 · C6
R18 · C7
R18 · C8
R18 · C9
R18 · C10
R18 · C11
R18 · C12
R18 · C13
R18 · C14
R19 · C1
R19 · C2
R19 · C3
R19 · C4
R19 · C5
R19 · C6
R19 · C7
R19 · C8
R19 · C9
R19 · C10
R19 · C11
R19 · C12
R19 · C13
R19 · C14
R20 · C1
R20 · C2
R20 · C3
R20 · C4
R20 · C5
R20 · C6
R20 · C7
R20 · C8
R20 · C9
R20 · C10
R20 · C11
R20 · C12
R20 · C13
R20 · C14
R21 · C1
R21 · C2
R21 · C3
R21 · C4
R21 · C5
R21 · C6
R21 · C7
R21 · C8
R21 · C9
R21 · C10
R21 · C11
R21 · C12
R21 · C13
R21 · C14
R22 · C1
R22 · C2
R22 · C3
R22 · C4
R22 · C5
R22 · C6
R22 · C7
R22 · C8
R22 · C9
R22 · C10
R22 · C11
R22 · C12
R22 · C13
R22 · C14
R23 · C1
R23 · C2
R23 · C3
R23 · C4
R23 · C5
R23 · C6
R23 · C7
R23 · C8
R23 · C9
R23 · C10
R23 · C11
R23 · C12
R23 · C13
R23 · C14
R24 · C1
R24 · C2
R24 · C3
R24 · C4
R24 · C5
R24 · C6
R24 · C7
R24 · C8
R24 · C9
R24 · C10
R24 · C11
R24 · C12
R24 · C13
R24 · C14
R25 · C1
R25 · C2
R25 · C3
R25 · C4
R25 · C5
R25 · C6
R25 · C7
R25 · C8
R25 · C9
R25 · C10
R25 · C11
R25 · C12
R25 · C13
R25 · C14
R26 · C1
R26 · C2
R26 · C3
R26 · C4
R26 · C5
R26 · C6
R26 · C7
R26 · C8
R26 · C9
R26 · C10
R26 · C11
R26 · C12
R26 · C13
R26 · C14
R27 · C1
R27 · C2
R27 · C3
R27 · C4
R27 · C5
R27 · C6
R27 · C7
R27 · C8
R27 · C9
R27 · C10
R27 · C11
R27 · C12
R27 · C13
R27 · C14
R28 · C1
R28 · C2
R28 · C3
R28 · C4
R28 · C5
R28 · C6
R28 · C7
R28 · C8
R28 · C9
R28 · C10
R28 · C11
R28 · C12
R28 · C13
R28 · C14
<script setup lang="ts">
import { createUniformExtentIndex } from '@sectile/virtual/extent-index'
import { createDenseTrackGridLayout, trackGridLayoutStrategy } from '@sectile/virtual/track-grid-layout'
import { VirtualizerContent, VirtualizerItem, VirtualizerRoot } from '@sectile/vue/virtual/core'
const count = 300
const ids = Array.from({ length: count * count }, (_, index) =>
`cell-${Math.floor(index / count)}-${index % count}`,
)
const grid = createDenseTrackGridLayout(
createUniformExtentIndex(count, { kind: 'exact', value: 28 }),
createUniformExtentIndex(count, { kind: 'exact', value: 72 }),
ids,
)
</script>
<template>
<VirtualizerRoot
:default-state="grid"
:strategy="trackGridLayoutStrategy"
>
<template v-slot="{ placements }">
<VirtualizerContent>
<VirtualizerItem
v-for="cell in placements"
:key="cell.id"
:placement="cell"
size="both"
>
{{ cell.id }}
</VirtualizerItem>
</VirtualizerContent>
</template>
</VirtualizerRoot>
</template>트랙 격자는 행 높이와 열 너비를 각각 관리합니다. 셀이 여러 행이나 열을 차지하는 병합 영역도 같은 좌표계에 둘 수 있습니다. Vue의 VirtualizerRoot에는 trackGridLayoutStrategy를 연결합니다.
상품 카드처럼 화면 너비에 맞춰 열 수가 바뀌고 세로 방향으로만 이어지는 화면에는 VirtualGrid가 더 간단합니다. minLaneSize를 전달하면 viewport 너비에 맞춰 열 수를 계산합니다.
벽돌형
높이가 다른 카드를 빈 공간이 적도록 여러 열에 배치합니다. 아래 예제는 30,000개 카드의 실제 DOM 높이를 측정하고, viewport 주변의 카드만 만듭니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
내용이 여러 줄로 늘어나도 별도의 높이 계산 함수 없이 배치에 반영됩니다.
목록 앞쪽이 바뀌면 현재 읽고 있는 항목을 기준으로 스크롤 위치를 보정합니다.
화면에 들어온 실제 콘텐츠의 높이를 측정해 다음 항목의 위치를 갱신합니다.
<script setup lang="ts">
import { VirtualMasonry } from '@sectile/vue/virtual/masonry'
const cards = Array.from({ length: 30_000 }, (_, index) => ({
id: `card-${index}`,
lines: 1 + (index % 5),
}))
</script>
<template>
<VirtualMasonry
:items="cards"
:get-key="card => card.id"
:min-lane-size="104"
:lane-gap="8"
:item-gap="8"
>
<template v-slot="{ value: card }">
<article>
<h3>{{ card.id }}</h3>
<p v-for="lineIndex in card.lines" :key="lineIndex">
Content
</p>
</article>
</template>
</VirtualMasonry>
</template>VirtualMasonry는 화면 너비와 minLaneSize로 열 수를 정합니다. 각 카드의 높이가 측정되면 영향을 받는 뒤쪽 카드만 다시 배치합니다.
자유 좌표
다이어그램과 편집기처럼 앱이 각 항목의 x·y 좌표와 크기를 이미 가지고 있을 때 사용합니다. 아래 예제는 40,000개의 서비스 노드를 불규칙한 군집으로 배치했습니다. 행·열 규칙이나 고정된 노드 크기 없이, 가로와 세로 어느 방향으로 이동해도 viewport와 겹치는 노드만 조회합니다.
<script setup lang="ts">
import { VirtualSpatial } from '@sectile/vue/virtual/spatial'
const nodes = Array.from({ length: 40_000 }, (_, index) => {
const cluster = Math.floor(index / 180)
const local = index % 180
const angle = local * 2.4
const radius = Math.sqrt(local) * 26
return {
id: `service-${index}`,
x: 480 + (cluster % 15) * 1_000 + Math.cos(angle) * radius,
y: 450 + Math.floor(cluster / 15) * 800 + Math.sin(angle) * radius,
width: 72 + (index % 4) * 12,
height: 40 + (index % 3) * 8,
layer: local === 0 ? 2 : 0,
}
})
</script>
<template>
<VirtualSpatial
:items="nodes"
:get-key="node => node.id"
:get-rect="node => node"
:get-z-index="node => node.layer"
:measure-size="false"
>
<template v-slot="{ value: node }">
{{ node.id }}
</template>
</VirtualSpatial>
</template>VirtualSpatial에는 getRect로 x, y, 너비, 높이를 전달합니다. Sectile은 앱의 좌표를 유지한 채 현재 화면과 겹치는 항목을 빠르게 찾습니다.
선택 기준
| 자료가 가진 구조 | 배치 |
|---|---|
| 순서와 항목 크기 | 선형 |
| 독립적인 행과 열 | 트랙 격자 |
| 순서와 서로 다른 카드 높이 | 벽돌형 |
| 이미 정해진 x·y 사각형 | 자유 좌표 |