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 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 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} />

src/components/TextListItem/index.tsx

@@ -3,37 +3,33 @@ import { WindowScroller, CellMeasurer, CellMeasurerCache, AutoSizer, List, ListR
 import { checkInfiniteScrollPosition } from '../../helpers/scroll';
 import { throttle } from 'lodash-es';
 
-import { ImageListItem } from '../ImageList';
+import { ImageListItemState, SPLICE_SIZE } from '../ImageList';
 import { Container, Heading, Button, Text } from '@chakra-ui/react';
+import ImageListItem from '../../components/ImageListItem';
 import StackSkleton from '../../components/StackSkeleton';
 
-import './index.scss';
-
 const cellCache = new CellMeasurerCache({
   defaultWidth: 100,
   fixedWidth: true,
 });
 
-let totalList: ImageListItem[] = [];
+let totalList: ImageListItemState[] = [];
 
 const ImageListVirtualized = () => {
-  const [list, setList] = useState<ImageListItem[]>([]);
+  const [list, setList] = useState<ImageListItemState[]>([]);
   const listRef = useRef<List>(null);
 
   const rowRenderer = ({ index, key, parent, style }: ListRowProps) => {
     return (
       <CellMeasurer cache={cellCache} parent={parent} key={key} columnIndex={0} rowIndex={index}>
         {({ measure }) => (
           <div style={style} key={index}>
-            <div className="image-list-item">
-              <section className="thumb-wrap">
-                <img src={list[index].thumbnailUrl} alt="" onLoad={measure} />
-              </section>
-              <section>
-                <p>index: {index}</p>
-                <p>title: {list[index].title}</p>
-              </section>
-            </div>
+            <ImageListItem
+              index={index}
+              imageUrl={list[index].thumbnailUrl}
+              title={list[index].title}
+              onLoad={measure} // 중요: measure 함수로 이미지가 로드된 이후 재 측정을 해주어야 정확한 사이즈로 랜더링됩니다.
+            />
           </div>
         )}
       </CellMeasurer>
@@ -58,7 +54,7 @@ const ImageListVirtualized = () => {
       return;
     }
 
-    const data = totalList.splice(0, 100);
+    const data = totalList.splice(0, SPLICE_SIZE);
     setList([...list, ...data]);
   }, [list]);
 
@@ -104,8 +100,8 @@ const ImageListVirtualized = () => {
                     autoHeight
                     height={height}
                     width={width}
-                    isScrolling={isScrolling}
                     overscanRowCount={0}
+                    isScrolling={isScrolling}
                     onScroll={onChildScroll}
                     scrollTop={scrollTop}
                     rowCount={list.length}

src/pages/ImageList/index.scss

@@ -1,24 +1,31 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, Fragment } 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 TextListItem from '../../components/TextListItem';
 
-export interface TextListItem {
+export interface TextListItemState {
   id: number;
   name: string;
   email: string;
   body: string;
 }
 
+let isFetching: boolean = false;
+
 const TextList = () => {
-  const [list, setList] = useState<TextListItem[]>([]);
+  const [list, setList] = useState<TextListItemState[]>([]);
 
   const addList = useCallback(() => {
+    isFetching = true;
     fetch('https://jsonplaceholder.typicode.com/comments').then((res) => {
       const data = res.json();
 
       data.then((newList) => {
         setList([...list, ...newList]);
+        isFetching = false;
       });
     });
   }, [list, setList]);
@@ -27,6 +34,23 @@ const TextList = () => {
     addList();
   }, []);
 
+  const onScroll = useCallback(() => {
+    if (isFetching) {
+      return false;
+    }
+
+    const isNeedFetching = checkInfiniteScrollPosition({ bottom: 600 });
+    if (isNeedFetching) {
+      addList();
+    }
+  }, [addList]);
+
+  useEffect(() => {
+    const onScrollTrottle = throttle(onScroll, 100);
+    window.addEventListener('scroll', onScrollTrottle, { passive: true });
+    return () => window.removeEventListener('scroll', onScrollTrottle);
+  }, [onScroll]);
+
   return (
     <>
       <Container padding={0} marginBottom={5} textAlign="center">
@@ -44,12 +68,9 @@ const TextList = () => {
       <section>
         {list.length ? (
           list.map(({ name, email, body }, index) => (
-            <div className="text-list-item" key={index}>
-              <p>index: {index}</p>
-              <p>email: {email}</p>
-              <p>name: {name}</p>
-              <p>body: {body}</p>
-            </div>
+            <Fragment key={index}>
+              <TextListItem index={index} email={email} name={name} body={body} />
+            </Fragment>
           ))
         ) : (
           <StackSkleton count={5} />