Skeleton (스켈레톤)

Skeleton (스켈레톤)

데이터를 로드할 때 최종 사용자에게 풍부한 시각적·상호작용 경험을 제공하고 싶다면 스켈레톤을 선택할 수 있어요.

출처: 문서

본문

기본 사용법 (Basic usage)

기본 스켈레톤이에요.

행 설정 (Configurable Rows)

행 수를 직접 설정할 수 있어요. 더 정밀한 렌더링 효과를 위해 실제 렌더링되는 행 수는 항상 주어진 수보다 1행 많아요. 그 이유는 다른 행의 33% 너비인 제목 행을 렌더링하기 때문이에요.

애니메이션 (Animation)

로딩 애니메이션 표시 여부를 나타내는 animated 스위치 플래그를 제공해요. true일 때 el-skeleton의 모든 자식이 애니메이션을 보여줘요.

커스텀 템플릿 (Customized Template)

Element Plus는 가장 흔한 템플릿만 제공해요. 때로는 그것이 문제가 될 수 있어서, 이 작업을 위한 template이라는 슬롯이 있어요. 또한 선택할 수 있는 다양한 타입의 스켈레톤 단위를 제공해요. 자세한 내용은 이 페이지 하단으로 스크롤해서 API 설명을 보면 돼요. 또한 자신만의 커스텀 스켈레톤 구조를 만들 때 실제 DOM에 최대한 가깝게 구조화해야 해요. 그래야 높이 차이로 인한 DOM 바운싱을 피할 수 있어요.

로딩 상태 (Loading state)

로딩이 끝나면 항상 데이터가 있는 실제 UI를 최종 사용자에게 보여줘야 해요. loading 속성으로 DOM 표시 여부를 제어할 수 있어요. default 슬롯을 사용해서 실제 DOM 요소를 구성할 수도 있어요.

import { ref } from 'vue'

const loading = ref(true)
const currentDate = new Date().toDateString()

데이터 목록 렌더링 (Rendering a list of data)

대부분의 경우 스켈레톤은 아직 서버에서 가져오지 않은 데이터 목록을 렌더링한다는 표시로 사용돼요. 그런 다음 로딩 중인 것처럼 보이게 하기 위해 어디선가 스켈레톤 목록을 만들어야 해요. count 속성으로 브라우저에 몇 개의 템플릿을 렌더링할지 제어할 수 있어요.

TIP 브라우저에 가짜 UI를 많이 렌더링하는 것은 권장하지 않아요. 여전히 성능 문제를 일으키고, 스켈레톤을 파괴하는 데도 더 오래 걸려요. 더 나은 사용자 경험을 위해 count를 가능한 한 작게 유지하세요.

import { onMounted, ref } from 'vue'

interface ListItem {
  imgUrl: string
  name: string
}

const loading = ref(true)
const lists = ref([])
const currentDate = new Date().toDateString()

const setLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

onMounted(() => {
  loading.value = false
  lists.value = [
    {
      imgUrl:
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      name: 'Deer',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      name: 'Horse',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      name: 'Mountain Lion',
    },
  ]
})

렌더링 바운싱 방지 (Avoiding rendering bouncing)

때로 API가 매우 빨리 응답해요. 그럴 때 스켈레톤이 DOM에 렌더링된 직후 실제 DOM으로 전환해야 해서 갑작스러운 깜빡임이 발생해요. 이런 현상을 피하려면 throttle 속성을 사용할 수 있어요.

TIP 2.8.8부터 throttle 속성은 number와 object 두 가지 값을 지원해요. number를 전달하면 {leading: xxx}와 동일하게 스켈레톤 화면 표시의 스로틀링을 제어해요. 물론 {trailing: xxx}를 전달해서 스켈레톤 화면 사라짐의 스로틀링도 제어할 수 있어요.

import { ref } from 'vue'

const loading = ref(false)
const currentDate = new Date().toDateString()

초기 렌더링 로딩 (Initial rendering loading) 2.8.8

loading의 초기 값이 true일 때 throttle: {initVal: true, leading: xxx}를 설정하면 스로틀링 없이 초기 스켈레톤 화면을 즉시 표시할 수 있어요.

import { ref } from 'vue'

const loading = ref(true)
const currentDate = new Date().toDateString()

렌더링 바운싱 없이 표시/숨김 토글 (Toggle show/hide without rending bouncing) 2.8.8

TIP throttle: {initVal: true, leading: xxx, trailing: xxx}로 설정하면 스켈레톤 효과의 초기 표시를 제어하고, 로딩 상태 전환 시 스켈레톤의 전환을 더 부드럽게 만들 수 있어요.

때로는 로딩 표시/숨김을 토글할 때 비즈니스 컴포넌트를 더 부드럽게 렌더링하고 싶을 수 있어요. throttle: {leading: xxx, trailing:xxx}를 설정해서 렌더링 바운싱을 제어할 수 있어요.

import { ref } from 'vue'

const loading = ref(false)
const currentDate = new Date().toDateString()

Skeleton API

Skeleton Attributes

Skeleton Slots

SkeletonItem API

SkeletonItem Attributes

더 알아보기 (Learn more)

• Result 컴포넌트 — 결과
• Table 컴포넌트 — 테이블
• Empty 컴포넌트 — 빈 상태
• Element Plus 시작하기 — 프로젝트 설정