[Virtualized List] #1. 기본 (Virtualized List의 구성)

Virtualized List 란?

가상 리스트

Virtualized List(가상리스트)란 나열된 리스트의 아이템 중 화면에 보여지는 아이템만 렌더링하는 리스트를 의미합니다. 유저가 스크롤을 내려 보이는 아이템의 범위가 변경되면 다시 변경된 아이템 만을 렌더링 하도록 구현됩니다. 사실 화면을 벗어난 곳의 아이템들은 화면 상에 렌더링 되어있지 않기 때문에 현재 시점에는 없는 아이템으로 생각할 수 있지만, 유저의 스크롤 위치에 따라 화면 상에 노출될 수 있으므로 위의 그림처럼 가상으로 리스트가 차례로 구성되어 있다고 생각하게 됩니다.

 

아이템을 모두 렌더링하는 기본 List와 비교했을 때, 필요한 아이템만을 렌더링하면 되므로 렌더링 비용이 감소합니다. 이렇게 렌더링 비용을 감소시키는 기술로는 페이지 별로 n개의 아이템만을 렌더링하는 Pagination을 사용할 수도 있습니다.

 

보통 이렇게 구성되어 있어요.

보통 Virtualized List는 다른 기능을 하는 요소들과 함께 사용됩니다.

• Virtualized List : 화면에 보이는 아이템을 렌더링
• Infinite Data fetching : 필요할 때마다 추가로 데이터 받아오기
• Unique id generator : 각 페이지별로 스크롤 위치를 저장하기 위해 페이지를 구분하는 id 생성기

간단한 기능으로 흐름을 익혀봅시다. 처음 유저가 페이지에 접근했을 때, 소량의 데이터 만을 서버로부터 받아오고, 현재 화면에 보이는 아이템 만을 렌더링 합니다(Virtualized List). 받아온 데이터가 모두 렌더링 되었다면 추가적으로 서버로부터 데이터를 받아옵니다(Infinite Data fetching). 스크롤이 중간 쯤 왔을 때 다른 페이지로 이동했다가 뒤로가기 버튼을 누르면 유저는 이전에 보던 리스트의 위치로 돌아올 수 있어야 합니다. 이러한 스크롤 위치는 페이지마다 구분되어 저장할 수 있어야 합니다(Unique id generator).

위에서 언급한 주요기능 이외에도 (스크롤은 리스트가 아닌 전체 페이지를 대상으로 동작해야 한다), (유저가 이전에 보던 리스트의 위치로 돌아올 때 첫 아이템부터 데이터를 불러 와서는 안된다), (열의 수가 반응형으로 변경되어야 한다)는 등의 다양한 니즈가 존재합니다.

 

다음 챕터 에서는 가상리스트를 사용하는 서비스에서 필요로 하는 기능들을 모두 리스팅 해보고 몇몇의 기능 구현이 왜 어려운 지 분석해보겠습니다. 마지막 챕터 에서는 가상 리스트 라이브러리를 비교해보고 대략적인 인터페이스를 코드로 작성해보겠습니다.

 

 부정확한 정보가 담겨있을 수 있습니다! 

 댓글로 알려주세요 :)