Flutter

ListView & GridView

ListView, ListView.builder, GridView, ScrollController, ์•„์ดํ…œ ์žฌ์‚ฌ์šฉ, lazy loading

25 ๋ฉด์ ‘ ์งˆ๋ฌธยท
Mid-Level
1

Flutter์—์„œ ListView()์™€ ListView.builder()์˜ ์ฃผ์š” ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

๋‹ต๋ณ€

ListView()๋Š” ๋ชจ๋“  ์ž์‹์„ ์ฆ‰์‹œ ์ƒ์„ฑํ•˜๋ฏ€๋กœ ๊ธด ๋ชฉ๋ก์—์„œ๋Š” ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ListView.builder()๋Š” lazy loading์„ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์ ฏ์ด ํ™”๋ฉด์— ๋ณด์ผ ๋•Œ๋งŒ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์š”์†Œ๊ฐ€ ๋งŽ์€ ๋ชฉ๋ก์˜ ๊ฒฝ์šฐ, ํ™”๋ฉด ๋ฐ–์˜ ์œ„์ ฏ์„ ์žฌํ™œ์šฉํ•˜์—ฌ ๋ฉ”๋ชจ๋ฆฌ์™€ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋ฏ€๋กœ ListView.builder()๊ฐ€ ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค.

2

ํ‘œ์‹œํ•  ์š”์†Œ์˜ ๊ฐœ์ˆ˜๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด ํ•„์ˆ˜์ธ ListView.builder() ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

๋‹ต๋ณ€

itemCount ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ๋ชฉ๋ก์— ๋ช‡ ๊ฐœ์˜ ์š”์†Œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ListView.builder()์— ์•Œ๋ ค์ค๋‹ˆ๋‹ค. ์ด ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์—†์œผ๋ฉด ๋ชฉ๋ก์ด ๋ฌดํ•œํ•œ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ๋˜์–ด itemBuilder๊ฐ€ ๋ฌดํ•œ์ • ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. itemCount๋ฅผ ์„ค์ •ํ•˜๋ฉด ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์–ธ์ œ ์š”์†Œ ๊ตฌ์ถ•์„ ์ค‘๋‹จํ•ด์•ผ ํ•˜๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ๊ณ  ์Šคํฌ๋กค ํ‘œ์‹œ๊ธฐ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3

ListView์˜ ๊ฐ ์š”์†Œ ์‚ฌ์ด์— ๊ตฌ๋ถ„์„ ์„ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”?

๋‹ต๋ณ€

ListView.separated()๋Š” ์š”์†Œ ์‚ฌ์ด์— ๊ตฌ๋ถ„์„ ์„ ํ‘œ์‹œํ•˜๋„๋ก ํŠน๋ณ„ํžˆ ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. itemBuilder ์™ธ์— separatorBuilder๋ฅผ ๋ฐ›์•„์„œ ๊ฐ ์š”์†Œ ์‚ฌ์ด์— ์‚ฌ์šฉ์ž ์ •์˜ ์œ„์ ฏ(์˜ˆ: Divider)์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์€ itemBuilder์—์„œ ๊ตฌ๋ถ„์„ ์„ ์ˆ˜๋™์œผ๋กœ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๊น”๋”ํ•ฉ๋‹ˆ๋‹ค.

4

Flutter์—์„œ ๊ฐ€๋กœ ๋ฐฉํ–ฅ ListView๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”?

5

ListView์—์„œ shrinkWrap ๋งค๊ฐœ๋ณ€์ˆ˜์˜ ์—ญํ• ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

+22 ๋ฉด์ ‘ ์งˆ๋ฌธ

๊ธฐํƒ€ Flutter ๋ฉด์ ‘ ์ฃผ์ œ

Dart ๊ธฐ์ดˆ

Junior
25๊ฐœ ์งˆ๋ฌธ

Dart ์–ธ์–ด ํ•ต์‹ฌ

Junior
15๊ฐœ ์งˆ๋ฌธ

Flutter ๊ธฐ์ดˆ

Junior
18๊ฐœ ์งˆ๋ฌธ

์œ„์ ฏ ์ƒ๋ช…์ฃผ๊ธฐ

Junior
20๊ฐœ ์งˆ๋ฌธ

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€

Junior
20๊ฐœ ์งˆ๋ฌธ

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒ๋ช…์ฃผ๊ธฐ

Junior
20๊ฐœ ์งˆ๋ฌธ

Layouts & Constraints

Mid-Level
24๊ฐœ ์งˆ๋ฌธ

๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฐ ๋ผ์šฐํŒ…

Mid-Level
22๊ฐœ ์งˆ๋ฌธ

๊ธฐ๋ณธ ์ƒํƒœ ๊ด€๋ฆฌ

Mid-Level
22๊ฐœ ์งˆ๋ฌธ

Provider ํŒจํ„ด

Mid-Level
18๊ฐœ ์งˆ๋ฌธ

Networking & HTTP

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

JSON ์ง๋ ฌํ™”

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

๋กœ์ปฌ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค

Mid-Level
22๊ฐœ ์งˆ๋ฌธ

ํผ๊ณผ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

์• ๋‹ˆ๋ฉ”์ด์…˜

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

Firebase ํ†ตํ•ฉ

Mid-Level
18๊ฐœ ์งˆ๋ฌธ

์œ ๋‹› ํ…Œ์ŠคํŠธ

Mid-Level
20๊ฐœ ์งˆ๋ฌธ

์œ„์ ฏ ํ…Œ์ŠคํŠธ

Mid-Level
18๊ฐœ ์งˆ๋ฌธ

๋นŒ๋“œ ๋ฐ ๋ฐฐํฌ

Mid-Level
16๊ฐœ ์งˆ๋ฌธ

ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ

Mid-Level
16๊ฐœ ์งˆ๋ฌธ

๋ฉ”๋ชจ๋ฆฌ ๋ฐ ์„ฑ๋Šฅ

Senior
22๊ฐœ ์งˆ๋ฌธ

Streams & RxDart

Senior
24๊ฐœ ์งˆ๋ฌธ

๊ณ ๊ธ‰ State Management

Senior
26๊ฐœ ์งˆ๋ฌธ

Flutter Design Patterns

Senior
24๊ฐœ ์งˆ๋ฌธ

์„ฑ๋Šฅ ์ตœ์ ํ™”

Senior
26๊ฐœ ์งˆ๋ฌธ

Platform Channels

Senior
20๊ฐœ ์งˆ๋ฌธ

Custom Painting

Senior
22๊ฐœ ์งˆ๋ฌธ

Flutter ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์•„ํ‚คํ…์ฒ˜

Senior
22๊ฐœ ์งˆ๋ฌธ

๋‹ค์Œ ๋ฉด์ ‘์„ ์œ„ํ•ด Flutter์„ ๋งˆ์Šคํ„ฐํ•˜์„ธ์š”

๋ชจ๋“  ์งˆ๋ฌธ, flashcards, ๊ธฐ์ˆ  ํ…Œ์ŠคํŠธ, ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์—ฐ์Šต, ๋ฉด์ ‘ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์— ์ ‘๊ทผํ•˜์„ธ์š”.

๋ฌด๋ฃŒ๋กœ ์‹œ์ž‘ํ•˜๊ธฐ