๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

2025/06/22

ํ”„๋ก ํŠธ์—”๋“œ/React 2025. 6. 22. [CoderPad] ๋ฆฌ์•กํŠธ ๊ฐ€์ƒ ์Šคํฌ๋กค (Virtualized List) ๊ฐœ์š” ํด๋ผ์ด์–ธํŠธ์—์„œ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ fetch ํ•ด์„œ map ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด๋ชจ๋“  ๋ฐ์ดํ„ฐ ๋‚ด์—ญ์„ ๋ฆฌ์ŠคํŠธํ•ด์„œ ๋ณด์—ฌ์ค€๋‹ค. ๊ทธ๋Ÿฌ๋‚˜, ๋งŒ์ผ ์ˆ˜๋ฐฑ๋งŒ๊ฐœ์˜ ๋ฐ์ดํ„ฐ๋ฅผ fetch ํ•ด์„œ ํ™”๋ฉด์— ๋ณด์—ฌ์ฃผ์–ด์•ผํ•œ๋‹ค๋ฉด ์–ด๋–จ๊นŒ?๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ DOM ํ™”๋ฉด์— ๊ทธ๋ฆฌ๋ ค๊ณ  ํ•œ๋‹ค๋ฉด ๊ฐ๋‹นํ•˜์ง€ ๋ชปํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €์— ๋ถ€ํ•˜๊ฐ€ ๋ฐœ์ƒํ•  ๊ฒƒ์ด๋‹ค.๋”ฐ๋ผ์„œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ์— ๊ทธ๋ฆฌ๊ธฐ๋ณด๋‹ค, ๋ณด์ด๋Š” ๋ถ€๋ถ„๋งŒ ๋ถ€๋ถ„์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋Š” ๊ธฐ์ˆ ์ด ํ•„์š”ํ•˜๋‹ค.๋งˆ์น˜ ํ™”๋ฉด์— ๋ชจ๋“  ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๋งˆ๋ƒฅ ํด๋ผ์ด์–ธํŠธ๋ฅผ ์†์ด๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฒƒ์ด ๋ฐ”๋กœ ๊ฐ€์ƒ ์Šคํฌ๋กค ๊ธฐ๋ฒ•์ด๋‹ค. ์ด๋Ÿฌํ•œ ์‹์˜ ๋ถ€๋ถ„ ๋ Œ๋”๋ง ๊ธฐ๋ฒ•์€ 3D ๊ฒŒ์ž„์—์„œ๋„ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์„ ์ค„์ด๊ธฐ ์œ„ํ•ด์„œ ์ž์ฃผ ํ™œ์šฉ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ๋Œ€ํ•™๊ต 2ํ•™๋…„ ๋•Œ, ์นœํ™˜๊ฒฝ ์ŠคํŒŸ์„ ์ง€๋„์— ๋ Œ๋”๋งํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋งก์•˜๋˜ ์ ์ด ์žˆ๋Š”๋ฐ๊ทธ ๋•Œ ๊ณต๊ณต ๋ฐ์ดํ„ฐ API ๊ฐ€..

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”