[Virtualized List] #2. Virtualized List์˜ ๊ธฐ๋Šฅ
์›น (WEB)/๊ณต๋ถ€ 2023. 1. 7. 22:37

์ด๋ฒˆ ์ฑ•ํ„ฐ์—์„œ๋Š” ๊ฐ€์ƒ ๋ฆฌ์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์„œ๋น„์Šค์—์„œ ํ•„์š”๋กœ ํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์„ ๋ชจ๋‘ ๋ฆฌ์ŠคํŒ… ํ•ด๋ณด๊ณ , ๋ช‡๋ช‡์˜ ๊ธฐ๋Šฅ์ด ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„๋˜๋Š”์ง€ ์™œ ์–ด๋ ค์šด ์ง€ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. Major ๊ธฐ๋Šฅ ์œˆ๋„์šฐ ์Šคํฌ๋กค์„ ๋ฆฌ์ŠคํŠธ ์Šคํฌ๋กค์— ์ ์šฉ ํŽ˜์ด์ง€ ์žฌ๋ฐฉ๋ฌธ ์‹œ ์Šคํฌ๋กค ์œ„์น˜ ์œ ์ง€ ๐Ÿ”ฅ ์•„์ดํ…œ์˜ ๋†’์ด๊ฐ€ ์ž๋™์œผ๋กœ ์กฐ์ ˆ ํ™”๋ฉด์— ๋ณด์ด๋Š” ์•„์ดํ…œ๋งŒ ๋ Œ๋”๋ง ์—ด์˜ ์ˆ˜๋ฅผ ๋ฐ˜์‘ํ˜• ์œผ๋กœ ์กฐ์ • ์–‘๋ฐฉํ–ฅ ๋ฌดํ•œ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ๊ณผ ์—ฐ๊ฒฐ ๐Ÿ”ฅ ๊ตฌํ˜„ํ•˜๊ธฐ ๊นŒ๋‹ค๋กœ์šด ๋ถ€๋ถ„์ด ์žˆ๋Š” ๊ธฐ๋Šฅ์€ ๐Ÿ”ฅ ๋กœ ํ‘œ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์œˆ๋„์šฐ ์Šคํฌ๋กค์„ ๋ฆฌ์ŠคํŠธ ์Šคํฌ๋กค์— ์ ์šฉ ์•„๋ž˜์˜ ์˜์ƒ์„ ๋ณด๋ฉด ์ƒํ™ฉ์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋ฆฌ์ŠคํŠธ ๋‚ด๋ถ€ ์Šคํฌ๋กค์˜ ๊ฒฝ์šฐ list-container ๋ผ๋Š” div์˜ height๊ฐ€ ์ •ํ•ด์ ธ์žˆ๊ณ  overflow-y๊ฐ€ scroll์ž…๋‹ˆ๋‹ค. ์ฆ‰, ํŽ˜์ด์ง€์˜ ๊ตฌ์„ฑ์ด (ํ—ค๋”, ๋ฆฌ์ŠคํŠธ, ํ‘ธํ„ฐ)๋กœ..