feat: 반복요소 컴포넌트화

Author: codejs-kr

README.md

@@ -5,4 +5,9 @@
 화면에 실제로 보여지는 부분만 DOM으로 렌더링하도록 연산하여 시스템 부하와 과도하게 낭비되는 리소스를 방지 하여 더 나은 서비스를 제공할 수 있습니다.
 
 ## 일반적인 목록 vs 가상화된 목록 비교
+
 일반적으로 목록을 많이 보여주는 화면과 react-virtualized를 사용하여 최적화 한 차이를 비교 제공합니다.
+
+## 공식문서
+
+- https://github.com/bvaughn/react-virtualized

src/App.tsx

@@ -1,5 +1,5 @@
 import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
-import { ChakraProvider, Flex, Container } from '@chakra-ui/react';
+import { ChakraProvider, Flex, Container, Heading } from '@chakra-ui/react';
 
 import Navigation from './components/Navigation';
 import TextList from './pages/TextList';
@@ -13,7 +13,12 @@ const App = () => {
       <Flex>
         <Container width="700px" padding={`20px 15px`}>
           <Router>
-            <Navigation />
+            <Container padding={`0 0 20px 0`} marginBottom={5} borderBottom={'solid 1px #bbb'}>
+              <Heading mb={5} textAlign="center">
+                React virtualized examples
+              </Heading>
+              <Navigation />
+            </Container>
             <Switch>
               <Route exact path="/" component={TextList} />
               <Route path="/text-list" component={TextList} />

src/pages/ImageListVirtualized/index.scss src/components/ImageListItem/index.scsssrc/pages/ImageListVirtualized/index.scss renamed to src/components/ImageListItem/index.scss

@@ -0,0 +1,26 @@
+import './index.scss';
+
+interface Props {
+  index: number;
+  imageUrl: string;
+  title: string;
+  onLoad?: () => void;
+}
+
+const ImageListItem = ({ index, imageUrl, title, onLoad }: Props) => {
+  return (
+    <div className="image-list-item">
+      <section className="thumb-wrap">
+        <img src={imageUrl} alt="" onLoad={() => onLoad?.()} />
+      </section>
+      <section>
+        <p>index: {index}</p>
+        <p>
+          {title} {title} {title} {title} {title} {title}
+        </p>
+      </section>
+    </div>
+  );
+};
+
+export default ImageListItem;

src/components/ImageListItem/index.tsx

@@ -0,0 +1,12 @@
+.navigation {
+  a {
+    padding: 10px;
+    background-color: #bbb;
+    text-align: center;
+
+    &.selected {
+      background-color: #61dafb;
+      font-weight: bold;
+    }
+  }
+}

src/components/Navigation/index.scss

@@ -1,27 +1,23 @@
 import { NavLink } from 'react-router-dom';
-import { Container, Heading, SimpleGrid } from '@chakra-ui/react';
+import { SimpleGrid } from '@chakra-ui/react';
+import './index.scss';
 
 const Naviagation = () => {
   return (
-    <Container padding={`0 0 20px 0`} marginBottom={5} borderBottom={'solid 1px #bbb'}>
-      <Heading mb={5} textAlign="center">
-        React virtualized examples
-      </Heading>
-      <SimpleGrid className="navigation" columns={2} spacingX="5px" spacingY="20px">
-        <NavLink to="/text-list" activeClassName="selected">
-          텍스트 목록
-        </NavLink>
-        <NavLink to="/text-list-virtualized" activeClassName="selected">
-          텍스트 목록 (with virtualized)
-        </NavLink>
-        <NavLink to="/image-list" activeClassName="selected">
-          이미지 목록
-        </NavLink>
-        <NavLink to="/image-list-virtualized" activeClassName="selected">
-          이미지 목록 (with virtualized)
-        </NavLink>
-      </SimpleGrid>
-    </Container>
+    <SimpleGrid className="navigation" columns={2} spacingX="5px" spacingY="20px">
+      <NavLink to="/text-list" activeClassName="selected">
+        텍스트 목록
+      </NavLink>
+      <NavLink to="/text-list-virtualized" activeClassName="selected">
+        텍스트 목록 (with virtualized)
+      </NavLink>
+      <NavLink to="/image-list" activeClassName="selected">
+        이미지 목록
+      </NavLink>
+      <NavLink to="/image-list-virtualized" activeClassName="selected">
+        이미지 목록 (with virtualized)
+      </NavLink>
+    </SimpleGrid>
   );
 };
 

src/components/Navigation/index.tsx

@@ -0,0 +1,23 @@
+import './index.scss';
+
+interface Props {
+  index: number;
+  email: string;
+  name: string;
+  body: string;
+}
+
+const TextListItem = ({ index, email, name, body }: Props) => {
+  return (
+    <div className="text-list-item">
+      <p>index: {index}</p>
+      <p>email: {email}</p>
+      <p>name: {name}</p>
+      <p>
+        body: {body} {body}
+      </p>
+    </div>
+  );
+};
+
+export default TextListItem;

src/pages/TextList/index.scss src/components/TextListItem/index.scsssrc/pages/TextList/index.scss renamed to src/components/TextListItem/index.scss

@@ -1,30 +1,63 @@
 import { useEffect, useState, useCallback } from 'react';
+import { checkInfiniteScrollPosition } from '../../helpers/scroll';
+import { throttle } from 'lodash-es';
+
 import { Container, Heading, Button, Text } from '@chakra-ui/react';
 import StackSkleton from '../../components/StackSkeleton';
-import './index.scss';
+import ImageListItem from '../../components/ImageListItem';
 
-export interface ImageListItem {
+export interface ImageListItemState {
   id: number;
   title: string;
+  url: string;
   thumbnailUrl: string;
 }
 
+export const SPLICE_SIZE = 500;
+
+let totalList: ImageListItemState[] = [];
+
 const ImageList = () => {
-  const [list, setList] = useState<ImageListItem[]>([]);
+  const [list, setList] = useState<ImageListItemState[]>([]);
 
-  const addList = useCallback(() => {
+  const fetchData = useCallback(async () => {
+    // const res = await fetch('https://jsonplaceholder.typicode.com/photos');
+    // console.log('res :>> ', res);
     fetch('https://jsonplaceholder.typicode.com/photos').then((res) => {
       const data = res.json();
 
       data.then((newList) => {
-        setList([...list, ...newList]);
+        totalList = newList;
+        addList();
       });
     });
-  }, [list, setList]);
+  }, []);
+
+  const addList = useCallback(() => {
+    if (!totalList.length) {
+      return;
+    }
+
+    const data = totalList.splice(0, SPLICE_SIZE);
+    setList([...list, ...data]);
+  }, [list]);
+
+  const onScroll = useCallback(() => {
+    const isNeedFetching = checkInfiniteScrollPosition({ bottom: 600 });
+    if (isNeedFetching) {
+      addList();
+    }
+  }, [addList]);
 
   useEffect(() => {
-    addList();
-  }, []);
+    fetchData();
+  }, [fetchData]);
+
+  useEffect(() => {
+    const onScrollTrottle = throttle(onScroll, 100);
+    window.addEventListener('scroll', onScrollTrottle);
+    return () => window.removeEventListener('scroll', onScrollTrottle);
+  }, [onScroll]);
 
   return (
     <>
@@ -43,11 +76,7 @@ const ImageList = () => {
       <section>
         {list.length ? (
           list.map(({ title, thumbnailUrl }, index) => (
-            <div className="text-list-item">
-              <div>index: {index}</div>
-              <div>title: {title}</div>
-              <div>body: {thumbnailUrl}</div>
-            </div>
+            <ImageListItem index={index} imageUrl={thumbnailUrl} title={title} />
           ))
         ) : (
           <StackSkleton count={5} />