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

react-infinite-scroll-component

 (1)
[spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(n)๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ react-infinite-scroll๊ณผ useInfiniteQuery๋กœ ๋ฌดํ•œ ์Šคํฌ๋กค ๊ตฌํ˜„ํ•˜๊ธฐ ๐Ÿ˜… ๋“œ๋””์–ด 2๋‹ฌ(?) ์ •๋„ ๊ธด ๊ธฐ๊ฐ„ ๋™์•ˆ ์ง„ํ–‰ํ–ˆ๋˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ์ง„์งœ ๋์„ ๋ฐ”๋ผ๋ณด๊ณ  ์žˆ๋Š” ๋Š๋‚Œ! ๐Ÿฅณ ์ •๋ฆฌํ•ด์„œ ํ•œ๋ฒˆ์— ์˜ฌ๋ฆฌ๋ ค๋‹ค๊ฐ€ ์ถ•ํ•˜ ๊ธฐ๋…(?)์œผ๋กœ ์˜ค๋Š˜ ๋”ฐ๋ˆํ•˜๊ฒŒ ๋๋‚ธ react-infinite-scroll+ useInfiniteQuery๋ฌดํ•œ ์Šคํฌ๋กค ๊ตฌํ˜„์— ๋Œ€ํ•ด ๊ธฐ๋กํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.โš ๏ธ ํ”„๋กœ์ ํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค ๋ฒ„์ ผ- "@tanstack/react-query": "^5.37.1"- "react": "^18.2.0",- "react-infinite-scroll-component": "^6.1.0"๐Ÿ‘‰ ๊นƒํ—ˆ๋ธŒ์—์„œ ๋ ˆํฌ์ง€ํ„ฐ๋ฆฌ ๊ตฌ๊ฒฝํ•˜๋Ÿฌ ๊ฐ€๊ธฐ์ฒซ ์‹œ๋„์›๋ž˜๋Š” ์ข€ ๋ณต์žกํ•œ ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„์„ ํ–ˆ์—ˆ๋‹ค."react-intersection-observer" ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•ด ๋ฆฌ์ŠคํŠธ ๋งˆ์ง€๋ง‰ ์•„์ดํ…œ์— ref๋ฅผ ์ง€์ •ํ•˜๊ณ ,์ด ref๊ฐ€ ๋ทฐํฌํŠธ์—..

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