플러터, Flutter) ListView의 단점을 해결해주는 ListView.Builder 위젯

플러터에서 ListView는 어느 정해진 공간안에 컨텐츠가 들어가고,

그 컨텐츠의 사이즈가 부모(ListView)의 사이즈보다 커지면 자동으로 스크롤이 생기는 위젯을 의미한다.

 

ListView.Builder는 이름만 봐서는 무슨 함수같지만,

사실 이친구도 위젯이다. 그리고 ListView처럼 안에 내용물이 많아지면 스크롤이 생긴다는 점은 같지만

내용물을 보여주는 내부 원리는 다르다.

 

ListView.Builder 매우 많은 양의 리스트를 보여줄 때 유리하다.

ListView.Builder는 동적으로 필요한 부분만, 보여줄 부분만 생성하기 때문이다.

스크롤이 내려가면 그때서야 필요한 부분들을 생성한다.

 

보여주려는 리스트가 10~20개 정도가 아닌, 수천개라고 해보자,

ListView는 build 메소드가 실행될 때 한 번에 다 만든다.

 

매우 많은 양의 리스트를 생성하게 될 경우, ListView를 사용하면

퍼포먼스 측면에서도 안 좋고,

실제로 사용자가 많은 양의 모든 리스트를 다 보지 않을 확률도 커져서 비효율적이다.

 

ListView.Builder는 이런 부분들을 해결해준다.

 

ListView.Builder를 만드는 방법에 필수적인 속성을 소개한다.

(자세한 속성들은 doc를 참고하는게 좋을 것 같다.)

 

바로 itembuilder와 itemcount이다.

 

itembuilder에는 콜백함수를 지정해주어야 한다. 그 콜백함수는 인수를 BuildContext와 Int를 갖고 있어야 한다.

보통은 그래서 인수로 (context, int) { ... } 이렇게 표시를 한다.

그리고 해당 콜백함수는 return으로 위젯을 해야한다. 이 위젯이 ListView에 들어가게 된다.

 

itemcount는 그럼 혹시 무엇인지 짐작이가는가?

itembuilder에 지정된 위젯 생성 콜백함수를 몇 번 실행할 것인지 정하는 역할이다.

(이 정도로만 개괄적으로 얘기하고 빌더에 대한 이야기를 디테일하게 들어가보자, 분명 아직도 이해안되는 부분이 많을 것이다)

 

1) BuildContext는 위젯을 어디에다가 만들면 되는지(렌더링 하면 되는지),

부모의 위젯트리에 대한 정보를 건내는 것인데, 우리가 콜백함수를 작성할 때 딱히 컨트롤할 부분은 없다.

 

2) 다음은 int인데, 얘는 index의 역할이다.

itembuilder에 지정된 함수는 실행될 때마다 인덱스의 값이 올라간다.

이 index의 값은 itemcount에 의해 컨트롤 된다.

 

최대 itemcount까지만 생성을 할 수 있다.

처음에는 리스트뷰에 보이는 부분까지만 생성을 한다.

그리고 사용자가 리스트뷰를 컨트롤해서 내리면 그때서야 itembuilder에 지정된 콜백함수들이 작동하여 내용물들을 빌드한다. 그리고 itemcount의 끝부분까지 도달하면 더이상 리스트뷰는 내려가지지 않는다.

 

 

** itemcount가 굉장히 적은 숫자라면?

 - itemcount까지 생성이 완료하고 더 이상의 위젯은 생성이 안되는 것은 당연하며

 - itemcount의 숫자가 적을 경우 리스트뷰의 공간이 남을 수도 있다.

 

 

** itemcount의 지정은 필수가 아니다!

 - 특히 무한 리스트뷰를 하고 싶으면 당연히 끝값을 설정하면 안 된다.

 - 아, 물론 index 끝값을 설정하고, 지속적으로 setstate 등의 state management를 통해 늘려나가도 되지만, 비용이 많이든다.

 

 - itemcount가 지정이 안됐을 경우 처음에 스트롤뷰가 꽉 찰때까지 itembuilder에 지정된 콜백함수가 실행되고,

스크롤을 내릴때마다, 즉 공간이 빌때마다 itembuilder의 콜백함수는 계속해서 실행되며 index는 무한히 증가한다.

 

 - 따라서 만약 index와 연관되어 위젯을 return하고 있을 경우, 컨트롤 잘 해 주어야 한다. 만약 에러가 생기면 그대로 crush되기 때문이다.