간단한 무한스크롤 예제를 통해 구현 방법에 대해 정리해보려 한다. redux와 redux-toolkit을 이용하여 구현하였다. 1. 예제 설명 // .
/components/List.js import React from "react"; const List = ({ nick, content }) => { return ( name: {nick} content: {content} ); }; export default List; 이런 식으로 데이터가 들어가있는 리스트들이 스크롤을 내릴 때마다 10개씩 추가되어 나오는 예제라고 해보자. 데이터베이스에 이런 데이터들이 저장되어있고, 이 데이터들을 10개씩 받아와 리스트들을 만들어 준다고 해보자.
백엔드는 express로 짰으며, API 코드는 아래와 같다. (단순히...
![[React] 무한 스크롤 (Infinite Scroll) 구현하기](https://mblogthumb-phinf.pstatic.net/MjAyMjEwMDJfMTUz/MDAxNjY0NzE0OTIzNjcx.mxNfUjJsFyQBx2I6zwTUhwaFPdcn2de_YTWDuYGxC9wg.cQoublTOVGtqKoqeuSkehX8G9kY3wfIcu5HT1pW0UsEg.PNG.dlaxodud2388/%BD%BA%C5%A9%B8%B0%BC%A6_2022-10-02_%BF%C0%C8%C4_9.48.40.png?type=w2)
#
infinitescroll구현
#
nextjsinfinitescroll
#
reactinfinitescroll
#
react무한스크롤
#
reduxtoolkit무한스크롤
#
redux무한스크롤
#
무한스크롤
#
무한스크롤구현
![[JavaScript] Prototype chaining(프로토타입 체이닝)](https://mblogthumb-phinf.pstatic.net/MjAxOTExMTdfMTg2/MDAxNTczOTgyNTc1NzY3.GSPo0uzA_Mufl1UXLkdbiNqYooFLWWHkS2Zxm5FiNOwg.Zf2-5qL0QZICF2wXlwzimWC9p_CEqOxR4o2DOTWYukUg.PNG.dlaxodud2388/image.png?type=w2)
![[프로그래머스] 기능개발(JavaScript)](https://mblogthumb-phinf.pstatic.net/MjAyMTA4MTFfMzIg/MDAxNjI4NjgzMjI5ODk2.6IVLLfTXVQWiU3-XeMA7pPQ7S4bRtqy4BTYaIWSP2qYg.iSD1gHTSofjl4Nz0Xx5byKthp5pNtdpcRsGZ-quhVUUg.PNG.dlaxodud2388/image.png?type=w2)
![[LeetCode] 695. Max Area of Island (JavaScript)](https://mblogthumb-phinf.pstatic.net/MjAyMjA0MDdfMTgg/MDAxNjQ5MzM1NTk3Nzk5.1ARSGqsqZSpIAPsnf9o0KT9FnINzExzsDEIYO-i9W50g.0wtUhYDZ0fley-MnykRoFR7StHCDqX8meqB7THIIviUg.PNG.dlaxodud2388/%BD%BA%C5%A9%B8%B0%BC%A6_2022-04-07_%BF%C0%C8%C4_9.46.34.png?type=w2)
![[Linux] M1에서 UTM을 이용한 Ubuntu 설치](https://mblogthumb-phinf.pstatic.net/MjAyMjA0MTBfMjY3/MDAxNjQ5NTg5MDUzNjYx.GgsNSNMfO7DL9h4fVyltpK6NlUjpS1I64eYZ2Ng5Gqog.DATWi7n15j0UvrtrEIuFj01bUj46Eq1GeI7rHm_oDi0g.PNG.dlaxodud2388/%BD%BA%C5%A9%B8%B0%BC%A6_2022-04-10_%BF%C0%C8%C4_8.10.49.png?type=w2)
![[BOJ 17212] 달나라 토끼를 위한 구매대금 지불 도우미(Node.js)](https://mblogthumb-phinf.pstatic.net/MjAyMjA1MTVfMTUw/MDAxNjUyNjA1MzA0MTUy.mkTMsLgaQnCC9g86ObaCBJzt7wlvz1mzQnqr7KQo9e0g.4qcN6nJmqWG6stT9ddcfkBhaQ9RnNw3D2e25-Vhuz8kg.PNG.dlaxodud2388/%BD%BA%C5%A9%B8%B0%BC%A6_2022-05-15_%BF%C0%C8%C4_6.01.38.png?type=w2)
![[CSS] CSS Flex (Flexbox)](https://mblogthumb-phinf.pstatic.net/MjAyMjA1MTFfODcg/MDAxNjUyMjc3NTQ0MjI1.MvU8AH3LPQQrE5mGPskpWYsMniMTsKbM1-tJnifIxXMg.NkwHVbwK0xOg60-WGJ3NBYLjPx-Yt-DayXfSch-R88sg.PNG.dlaxodud2388/%BD%BA%C5%A9%B8%B0%BC%A6_2022-05-11_%BF%C0%C8%C4_10.59.01.png?type=w2)