Vue.js 로 효율적인 가상 스크롤 구현

소개

이 프로젝트에서는 Vue.js 를 사용하여 가상 스크롤링 목록을 구현하는 방법을 배우게 됩니다. 가상 스크롤링은 대규모 데이터 세트의 가시 영역만 렌더링하는 기술로, 비가시 영역의 데이터를 렌더링하거나 부분적으로 렌더링하지 않습니다. 이는 매우 높은 렌더링 성능을 달성하며, 소량의 데이터로 많은 양의 데이터를 렌더링하는 데 적합합니다.

👀 미리보기

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

• axios 라이브러리를 사용하여 데이터를 비동기적으로 로드하고 렌더링하는 방법
• 가시 목록 항목만 렌더링하도록 가상 스크롤링 기능을 구현하는 방법
• 현재 스크롤 위치를 기반으로 가시 목록 항목의 시작 및 종료 인덱스를 계산하는 방법
• 가시 영역 외부의 추가 목록 항목을 렌더링하기 위해 버퍼를 사용하여 렌더링 성능을 최적화하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

• 렌더링 성능을 향상시키기 위해 가상 스크롤링 기능을 구현할 수 있습니다.
• Vue.js 컴포넌트에서 데이터를 비동기적으로 로드하고 렌더링할 수 있습니다.
• 현재 스크롤 위치를 기반으로 가시 목록 항목을 계산할 수 있습니다.
• 스크롤 중에 흰색 화면을 방지하기 위해 버퍼를 사용할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조와 로그인 기능과 관련된 파일에 대해 배우게 됩니다.

프로젝트 디렉토리 구조는 다음과 같습니다.

이 질문에 대한 초기 코드는 이미 제공되었습니다. 코딩 환경을 열면 디렉토리 구조는 다음과 같습니다.

├── js
│   ├── axios.min.js
│   ├── http-vue-loader.js
│   └── vue.min.js
├── data.json
├── index.html
└── virtual-scroll-list.vue

여기서:

• js/axios.min.js는 axios 요청 라이브러리 파일입니다.
• js/vue.min.js 및 js/http-vue-loader.js는 Vue.js 라이브러리 관련 파일입니다.
• data.json은 요청할 데이터 파일입니다.
• index.html은 메인 페이지입니다.
• virtual-scroll-list.vue는 완성해야 하는 컴포넌트 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다. 초기 효과는 빈 목록 상자입니다.

비동기 데이터 로딩 및 렌더링

이 단계에서는 axios 라이브러리를 사용하여 데이터를 비동기적으로 로드하고 렌더링하는 방법을 배우게 됩니다.

1. virtual-scroll-list.vue 파일을 엽니다.
2. mounted() 라이프사이클 훅에서 axios를 사용하여 data.json 파일에 요청을 보내고 list 데이터를 채웁니다.

mounted() {
  // TODO: 데이터 요청 완료
  axios("./data.json").then((res) => {
    this.list = res.data;
    this.totalHeight = this.list.length * this.itemHeight; // 전체 높이 계산
  });
}

이렇게 하면 data.json 파일에서 데이터를 가져와 list 데이터 속성에 저장합니다. totalHeight 속성도 list의 길이와 itemHeight를 기반으로 계산됩니다.

이 단계를 완료하면 초기 목록이 data.json 파일에서 로드된 데이터를 사용하여 렌더링되어야 합니다.

가상 스크롤 구현

이 단계에서는 가상 스크롤 기능을 구현하는 방법을 배우게 됩니다.

1. virtual-scroll-list.vue 파일을 엽니다.
2. scroll 이벤트 핸들러를 구현합니다.

methods: {
  scroll(e) {
    this.start = Math.floor(e.currentTarget.scrollTop / this.itemHeight);
  },
}

scroll 이벤트 핸들러는 현재 스크롤 위치를 기반으로 보이는 목록 항목의 start 인덱스를 계산합니다.

이 단계를 완료하면 가상 스크롤 기능이 구현되어야 하며, 목록 항목은 뷰포트에서 보일 때만 렌더링되어야 합니다. 최종 효과는 다음 그림과 같습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.