๐Ÿ“ฑ iOS

์ปฌ๋ ‰์…˜ ๋ทฐ

Kiwi๐Ÿ’ป 2022. 7. 26. 17:05

์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค์— ์ปฌ๋ ‰์…˜๋ทฐ๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ, ์•ฑ์˜ ์ฃผ์š” ์—ญํ• ์€ ์ปฌ๋ ‰์…˜ ๋ทฐ์™€ ๊ด€๋ จ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์ด๋‹ค.

์ปฌ๋ ‰์…˜ ๋ทฐ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜จ ๋‹ค์Œ ๋ฐ์ดํ„ฐ ์†Œ์Šค ํ”„๋กœํผํ‹ฐ์— ์ €์žฅํ•œ๋‹ค.

  • UICollectionViewDiffableDataSource

์ปฌ๋ ‰์…˜ ๋ทฐ์˜ ๋ฐ์ดํ„ฐ ๋ฐ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ๋ฅผ ๊ฐ„๋‹จํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋™์ž‘์„ ์ œ๊ณตํ•œ๋‹ค.

  • UICollectionViewDataSource

๋˜ํ•œ ์ด ํ”„๋กœํ† ์ฝœ์„ ์ฑ„ํƒํ•˜์—ฌ ๋ฐ์ดํ„ฐ ์†Œ์Šค ๊ฐœ์ฒด๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

์ปฌ๋ ‰์…˜ ๋ทฐ์˜ ๋ฐ์ดํ„ฐ๋Š” ์„น์…˜์œผ๋กœ ๊ทธ๋ฃนํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ๊ฐ์˜ ์•„์ดํ…œ๋“ค์„ ์กฐ์งํ•˜์—ฌ ๋ณด์—ฌ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ํ•˜๋‚˜์˜ ์•„์ดํ…œ์€ ๋ฐ์ดํ„ฐ์—์„œ ๊ฐ€์žฅ ์ž‘์€ ์œ ๋‹›์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์‚ฌ์ง„์•ฑ์˜ ํ•˜๋‚˜์˜ ์‚ฌ์ง„์ด ์•„์ดํ…œ์ด ๋  ์ˆ˜ ์žˆ๋‹ค.

  • UICollectionViewCell

ํ•ด๋‹น ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค์ธ ์…€์„ ์‚ฌ์šฉํ•˜์—ฌ ํ™”๋ฉด์— ํ•ญ๋ชฉ์„ ํ‘œ์‹œํ•œ๋‹ค.

์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค์— ์ปฌ๋ ‰์…˜ ๋ทฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”, ์‹œ๊ฐ์ ์œผ๋กœ ๋ณด์—ฌ์ง€๋Š” ํ™”๋ฉด๊ณผ ํ•ด๋‹นํ•˜๋Š” ์•„์ดํ…œ์˜ ๋ฐ์ดํ„ฐ ์†Œ์Šค์™€ ์ ์ ˆํžˆ ๋งค์นญ์ด ๋˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธํ•ด์•ผ๋งŒ ํ•œ๋‹ค. ์ด ๊ณผ์ •์„ UICollectionViewDiffableDataSource ๋Š” ์ž๋™์ ์œผ๋กœ ์ง„ํ–‰ํ•˜์ง€๋งŒ, ๋งŒ์•ฝ ์ปค์Šคํ…€ ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์ปฌ๋ ‰์…˜์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€, ์‚ญ์ œ ๋˜๋Š” ์žฌ์ •๋ ฌํ•  ๋•Œ๋งˆ๋‹ค UICollectionView์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ์…€์„ ์‚ฝ์ž…, ์‚ญ์ œ ๋ฐ ์žฌ์ •๋ ฌํ•ด์•ผ ํ•œ๋‹ค.

๋ ˆ์ด์•„์›ƒ

๋ ˆ์ด์•„์›ƒ์€ ์ปฌ๋ ‰์…˜ ๋ทฐ ๋‚ด๋ถ€์˜ ์ปจํ…์ธ ์˜ ์‹œ๊ฐ์  ๋ฐฐ์—ด์„ ์ •์˜ํ•œ๋‹ค.

UICollectionViewLayout ํด๋ž˜์Šค์˜ ํ•˜์œ„ ํด๋ž˜์Šค์ธ ๋ ˆ์ด์•„์›ƒ ๊ฐ์ฒด๋Š” ์ปฌ๋ ‰์…˜ ๋ทฐ ๋‚ด๋ถ€์˜ ๋ชจ๋“  ์…€๊ณผ ๋ณด์กฐ ๋ทฐ์˜ ๊ตฌ์„ฑ๊ณผ ์œ„์น˜๋ฅผ ์ •์˜ํ•œ๋‹ค

์ปฌ๋ ‰์…˜ ๋ทฐ๋ฅผ ๋™์ ์ธ ๋ ˆ์ด์•„์›ƒ์œผ๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • collectionViewLayout

๋ ˆ์ด์•„์›ƒ์€ collectionViewLayout์˜ ํ”„๋กœํผํ‹ฐ์— ์ €์žฅ๋œ๋‹ค. ์ด ์†์„ฑ์„ ์„ค์ •ํ•˜๋ฉด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์— ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์ฃผ์ง€ ์•Š๊ณ  ๋ ˆ์ด์•„์›ƒ์ด ์ฆ‰์‹œ ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค.

  • setCollectionViewLayout(_:animated:completion:)

๋ ˆ์ด์•„์›ƒ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์— ๋Œ€ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•˜๋ ค๋ฉด ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœ ํ•˜๋ฉด ๋œ๋‹ค.

  • startInteractiveTransition(to:completion:)

์ œ์Šค์ฒ˜ ์ธ์‹ ๋˜๋Š” ํ„ฐ์น˜ ์ด๋ฒคํŠธ์— ์˜ํ•ด ๊ตฌ๋™๋˜๋Š” ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์ „ํ™˜์„ ์ƒ์„ฑํ•˜๋Š” ๋ฉ”์„œ๋“œ, ์ „ํ™˜ ์ง„ํ–‰ ์ƒํ™ฉ์„ ์ถ”์ ํ•˜๊ธฐ ์œ„ํ•ด ์ œ์Šค์ฒ˜ ์ธ์‹๊ธฐ ๋˜๋Š” ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ์ฝ”๋“œ์™€ ํ•จ๊ป˜ ์ž‘๋™ํ•˜๋Š” ์ค‘๊ฐ„ ๋ ˆ์ด์•„์›ƒ์„ ๋‘”๋‹ค. ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ์ฝ”๋“œ์—์„œ ์ „ํ™˜์ด ์™„๋ฃŒ๋˜์—ˆ๋‹ค๊ณ  ํŒ๋‹จํ•˜๋ฉด finishInteractiveTransition() ๋˜๋Š” cancelInteractiveTransition() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ค‘๊ฐ„ ๋ ˆ์ด์•„์›ƒ ์„ ์ œ๊ฑฐํ•˜๊ณ  ์˜๋„ํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์‹คํ–‰ํ•œ๋‹ค.

์…€, ๋ณด์กฐ ๋ทฐ

์ปฌ๋ ‰์…˜ ๋ทฐ์˜ ๋ฐ์ดํ„ฐ ์†Œ์Šค๋Š” ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ฝ˜ํ…์ธ ์™€ ํ•ด๋‹น ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์…€๊ณผ ์ถ”๊ฐ€์ ์ธ ๋ทฐ๋ฅผ ๋ชจ๋‘ ์ œ๊ณตํ•œ๋‹ค.

์ปฌ๋ ‰์…˜๋ทฐ๊ฐ€ ์ฒ˜์Œ์œผ๋กœ ์ปจํ…์ธ ๋ฅผ ๋กœ๋“œํ• ๋•Œ ๋ฐ์ดํ„ฐ ์†Œ์Šค๊ฐ€ ๊ฐ๊ฐ์˜ ์•„์ดํ…œ์˜ ๋Œ€ํ•œ ๋ทฐ๋ฅผ ์ œ๊ณตํ•˜๋„๋ก ์š”์ฒญํ•œ๋‹ค.

์ปฌ๋ ‰์…˜๋ทฐ๋Š” ์žฌ์‚ฌ์šฉ์„ ์œ„ํ•ด ๋Œ€๊ธฐ์—ด ๋˜๋Š” ๋ทฐ์˜ ๋ชฉ๋ก์„ ์œ ์ง€ํ•œ๋‹ค.

  • dequeueReusableCell(withReuseIdentifier:for:)

์ปฌ๋ ‰์…˜๋ทฐ์—์„œ ์•„์ดํ…œ์— ๋Œ€ํ•œ ์…€์„ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•จ

  • dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:)

๋ ˆ์ด์•„์›ƒ์—์„œ ์š”์ฒญํ•œ ๋ณด์กฐ ๋ทฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฉ”์„œ๋“œ

์ด ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์ „์— ํ•ด๋‹น ๋ทฐ๊ฐ€ ์•„์ง ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ทฐ๋ฅผ ์ƒ์„ฑํ•  ๊ฒƒ์ธ์ง€ ์ปฌ๋ ‰์…˜ ๋ทฐ์—๊ฒŒ ์•Œ๋ ค์•ผ ํ•œ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ์ปฌ๋ ‰์…˜ ๋ทฐ์— ํด๋ž˜์Šค ๋˜๋Š” nibํŒŒ์ผ์„ ๋“ฑ๋กํ•ด์ฃผ์–ด์•ผ๋งŒ ํ•œ๋‹ค.

  • register(_:forCellWithReuseIdentifier:)

ํด๋ž˜์Šค ๋˜๋Š” nib ํŒŒ์ผ์„ ๋“ฑ๋กํ•˜๋Š” ๋ฉ”์†Œ๋“œ, ํ”„๋กœ์„ธ์Šค์˜ ์ผ๋ถ€๋กœ ๋ทฐ์˜ ๋ชฉ์ ์„ ์‹๋ณ„ํ•˜๋Š” ์žฌ์‚ฌ์šฉ ์‹๋ณ„์ž๋ฅผ ์ง€์ •ํ•œ๋‹ค. ์ด๊ฒƒ์€ ๋‚˜์ค‘์— ๋ทฐ๋ฅผ ๋Œ€๊ธฐ์—ด์—์„œ ๋นผ๋‚ผ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•œ ๋ฌธ์ž์—ด์ด๋‹ค.

๋ฐ์ดํ„ฐ ์†Œ์Šค ๋ฉ”์„œ๋“œ์—์„œ๋Š” ์ ์ ˆํ•œ ๋ทฐ๋ฅผ ๋Œ€๊ธฐ์—ด์—์„œ ๋นผ๋‚ธ ํ›„ ํ•ด๋‹น ๋‚ด์šฉ์„ ๊ตฌ์„ฑํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ปฌ๋ ‰์…˜ ๋ทฐ๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ๋ ˆ์ด์•„์›ƒ์—์„œ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜จ ํ›„ ์ปฌ๋ ‰์…˜ ๋ทฐ๋Š” ์ด๋ฅผ ๋ทฐ์— ์ ์šฉํ•˜๊ณ  ํ‘œ์‹œํ•œ๋‹ค.

Data Prefetching

์ปฌ๋ ‰์…˜ ๋ทฐ๋Š” ์‘๋‹ต์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•œ ๋‘ ๊ฐ€์ง€ ํ”„๋ฆฌํŽ˜์นญ ๊ธฐ์ˆ ์„ ์ œ๊ณตํ•œ๋‹ค.

  • Cell prefetching(default Set)์€ ํ•ด๋‹น ์…€์ด ํ•„์š”ํ•  ๋•Œ๋ณด๋‹ค ๋ฏธ๋ฆฌ ์…€์„ ์ค€๋น„ํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์ปฌ๋ ‰์…˜ ๋ณด๊ธฐ์— ๋งŽ์€ ์ˆ˜์˜ ์…€์ด ๋™์‹œ์— ํ•„์š”ํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ Cell rendering์€ ์—ฌ๋Ÿฌ ๋ ˆ์ด์•„์›ƒ์— ๊ฑธ์ณ ๋ถ„์‚ฐ๋˜์–ด ์ด๋ฃจ์–ด์ง€๊ณ  ์ด๋Š” ๋” ๋ถ€๋“œ๋Ÿฌ์šด ์Šคํฌ๋กค์„ ๊ฐ€๋Šฅ์ผ€ ํ•œ๋‹ค.

  • Data prefetching์€ ์ปฌ๋ ‰์…˜๋ทฐ์˜ ๋ฐ์ดํ„ฐ ์š”๊ตฌ์‚ฌํ•ญ์„ ์…€์ด ์š”์ฒญํ•˜๊ธฐ ๋ณด๋‹ค ๋จผ์ € ์•Œ๋ฆผ ๋ฐ›์Œ์œผ๋กœ์จ ์…€์˜ ์ปจํ…์ธ ๊ฐ€ ๋น„์šฉ์ด ํฐ ๋ฐ์ดํ„ฐ ๋กœ๋”ฉ ํ”„๋กœ์„ธ์Šค์— ์˜์กดํ•˜๋Š” ๊ฒฝ์šฐ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค(๋„คํŠธ์›Œํฌ ์š”์ฒญ).