Flutter로 개발 중 코드가 길어져 가독성이 떨어질 때,
또는 내가 원하는 위젯을 찾기 힘들 때가 있다.
그럴 땐 Cunstom Widget을 만들어 사용해주는 것이 효율적이다.
Custom widget
Custom widget = Component
React의 Component와 같다고 볼 수 있다.
긴 코드의 위젯을 한 단어로 줄여서 사용할 수 있다는 것이다.
Custom Widget의 장점
-
제작하면 어디던지 가져올 수 있다.
-
Custom Widget 내부의 Custom Widget도 제작이 가능하다.
주의할 점
변수로 데이터를 지정해 Custom Widget안에서 사용 가능하지만,
변화가 잦은 데이터(ex. 실시간 데이터 등)를 변수로 지정해
Custom Widget으로 사용하게 되면 성능 상의 이슈가 발생할 수 있다.
ListView
기존의 Ui들을 세로 배치하기 위해서 Column()을 사용해줬지만
UI들이 50개, 60개 이상이라면?
게다가 Column은 스크롤이 생성되지 않아 밑에 있을 데이터들을
보여줄 수 없는데 해결 방안은?
이럴 때 사용할 수 있는 widget이 ListView()이다.
ListView의 특징
- 기존 Column을 사용했을 때보다 성능 개선이 가능
- 스크롤바 자동 생성
- 스크롤 위치 감지 가능
이 ListView를 사용해 반복적인 레이아웃을 작성할 수 있었다.
children: <Widget>을 사용하는 방법
children에 widget을 생성해 그 안에 반복되는 코드를 작성해주는 방법이다.
(이게 아니야.....)
하지만 이 방법은 반복시킬 UI를 내가 계속 작성해줘야 한다는 단점이 존재했다.
React의 map문 처럼 편하게 반복시킬 무언가가 필요했다.
그리고 발견한 것이 ListView.builder라는 것이었다.
ListView.builder
React의 map 과 같은 역할을 수행
ListView.builder에는 반복 횟수를 지정하는 itemCount,
어떤 위젯을 반복할지 지정하는 itemBuilder: (){ return 반복 위젯 }
이 있다.
간결한 코드 작성이 가능해져 가독성이 높아졌다.
또한 원하던 대로 UI가 렌더링 된 것을 볼 수 있다.
Reference
Flutter 공식 문서
