๋ฐ˜์‘ํ˜•

react More button pagination 1
[React] ๊ธฐ์กด ๋ฐ์ดํ„ฐ์—์„œ API Fetching ํ›„(๋”๋ณด๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ ํ›„) ์ƒˆ๋กœ ๋ถˆ๋Ÿฌ์˜จ ๋ฐ์ดํ„ฐ ํ•ฉ์น˜๋Š” ๋ฐฉ๋ฒ• / ๋”๋ณด๊ธฐ ๋ฒ„ํŠผ ํŽ˜์ด์ง€๋„ค์ด์…˜

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” React์—์„œ ๊ธฐ์กด ๋ฐ์ดํ„ฐ์—์„œ ๋”๋ณด๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ ํ›„ ์ƒˆ๋กœ ๋ถˆ๋Ÿฌ์˜จ ๋ฐ์ดํ„ฐ ํ•ฉ์น˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ณต์ง€์‚ฌํ•ญ ๋ชฉ๋ก ์กฐํšŒ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋˜ ๋„์ค‘ ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋งŽ์•„์งˆ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•„ ๋”๋ณด๊ธฐ ๋ฒ„ํŠผ UI๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ API๋Š” ์Šคํ”„๋ง๋ถ€ํŠธ์˜ Pageable ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰ ๊ธฐ์กด ๋ฐ์ดํ„ฐ์—์„œ ๋”๋ณด๊ธฐ ๋ฒ„ํŠผ UI๋ฅผ ํด๋ฆญํ•  ๋•Œ๋งˆ๋‹ค page ๊ฐ€ +1 ์”ฉ ์ฆ๊ฐ€ํ•˜๋ฉด์„œ ์ƒˆ๋กœ ๋ถˆ๋Ÿฌ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ํ™”๋ฉด์— ๋ณด์—ฌ์ค˜์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. How to implement ์•„๋ž˜์™€ ๊ฐ™์ด NoticeList ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค. fetchNotice๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๋งˆ๋‹ค, ๊ธฐ์กด ๋ฐ์ดํ„ฐ์— ์ƒˆ๋กœ ๋ถˆ๋ ค์ง„ ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์œ„ ์ฝ”๋“œ์—์„œ๋Š” ์ƒˆ๋กœ ๋ถˆ๋ ค์ง„ ๋ฐ์ดํ„ฐ๋งŒ์„ setN..
Framework/React 2023.02.11
1
๋”๋ณด๊ธฐ
๋ฐ˜์‘ํ˜•

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