대규모 목록의 렌더링을 최적화하는 방법

14 collapsed lines
1
"use client";
2

3
import { useSetAtom } from "jotai";
4

5
import { Button } from "@/components/ui/button";
6
import { selectedIconsAtom } from "@/atoms/selected-icons";
7
import type { IconType } from "@/types/icons";
8

9
function AddIconButton({ icon }: { icon: IconType }) {
10
  const setSelectedIcons = useSetAtom(selectedIconsAtom);
11

12
  const handleClick = () => setSelectedIcons((prev) => [...prev, icon.title]);
13

14
  return (
15
    <Button
16
      variant="outline"
17
      className="flex aspect-square h-full w-full flex-col gap-4 text-wrap"
18
      onClick={handleClick}
19
    >
20
      <div
21
        dangerouslySetInnerHTML={{
22
          __html: icon.svg.replace("<svg", `<svg fill="#${icon.hex}"`),
23
        }}
24
        className="h-16 w-16"
25
      />
26
      <span className="text-xs">{icon.title}</span>
27
    </Button>
4 collapsed lines
28
  );
29
}
30

31
export { AddIconButton };

14 collapsed lines
1
"use client";
2

3
import { useSetAtom } from "jotai";
4

5
import { Button } from "@/components/ui/button";
6
import { selectedIconsAtom } from "@/atoms/selected-icons";
7
import type { IconType } from "@/types/icons";
8

9
function AddIconButton({ icon }: { icon: IconType }) {
10
  const setSelectedIcons = useSetAtom(selectedIconsAtom);
11

12
  const handleClick = () => setSelectedIcons((prev) => [...prev, icon.title]);
13

14
  return (
15
    <Button
16
      variant="outline"
17
      className="size-full justify-normal gap-8 text-wrap p-4 px-6"
18
      onClick={handleClick}
19
    >
20
      <div
21
        dangerouslySetInnerHTML={{
22
          __html: icon.svg.replace("<svg", `<svg fill="#${icon.hex}"`),
23
        }}
24
        className="size-8"
25
      />
26
      <span className="text-base">{icon.title}</span>
27
    </Button>
4 collapsed lines
28
  );
29
}
30

31
export { AddIconButton };

1
"use client";
2

3
import { useRef } from "react";
4

5
import { icons } from "@/assets/icons";
6

7
function IconsList({ searchValue }: { searchValue: string }) {
8
  const parentRef = useRef<HTMLDivElement>(null);
9

10
  const filteredIcons = Object.entries(icons).filter((icon) =>
11
    icon[1].title.toLowerCase().includes(searchValue)
12
  );
13

14
  return (
15
    <div
16
      className="max-h-[calc(100dvh-512px)] min-h-96 overflow-auto"
17
      ref={parentRef}
18
    ></div>
19
  );
20
}
21

22
export { IconsList };

1
"use client";
2

3
import { useRef } from "react";
4
import { useVirtualizer } from "@tanstack/react-virtual";
5

6
import { icons } from "@/assets/icons";
7

8
function IconsList({ searchValue }: { searchValue: string }) {
9
  const parentRef = useRef<HTMLDivElement>(null);
10

11
  const filteredIcons = Object.entries(icons).filter((icon) =>
12
    icon[1].title.toLowerCase().includes(searchValue)
13
  );
14

15
  const rowVirtualizer = useVirtualizer({
16
    count: filteredIcons.length,
17
    getScrollElement: () => parentRef.current,
18
    estimateSize: () => 66,
19
    gap: 16,
20
  });
21

22
  return (
23
    <div
24
      className="max-h-[calc(100dvh-512px)] min-h-96 overflow-auto"
25
      ref={parentRef}
26
    ></div>
27
  );
28
}
29

30
export { IconsList };

22 collapsed lines
1
"use client";
2

3
import { useRef } from "react";
4
import { useVirtualizer } from "@tanstack/react-virtual";
5

6
import { icons } from "@/assets/icons";
7

8
function IconsList({ searchValue }: { searchValue: string }) {
9
  const parentRef = useRef<HTMLDivElement>(null);
10

11
  const filteredIcons = Object.entries(icons).filter((icon) =>
12
    icon[1].title.toLowerCase().includes(searchValue)
13
  );
14

15
  const rowVirtualizer = useVirtualizer({
16
    count: filteredIcons.length,
17
    getScrollElement: () => parentRef.current,
18
    estimateSize: () => 66,
19
    gap: 16,
20
  });
21

22
  return (
23
    <div
24
      className="max-h-[calc(100dvh-512px)] min-h-96 overflow-auto"
25
      ref={parentRef}
26
    >
27
      <div
28
        className="relative w-full"
29
        style={{
30
          height: `${rowVirtualizer.getTotalSize()}px`,
31
        }}
32
      ></div>
33
    </div>
4 collapsed lines
34
  );
35
}
36

37
export { IconsList };

1
"use client";
2

3
import { useRef } from "react";
4
import { useVirtualizer } from "@tanstack/react-virtual";
5

6
import { AddIconButton } from "@/components/add-icon-button";
7
import { icons } from "@/assets/icons";
8

9
function IconsList({ searchValue }: { searchValue: string }) {
10
  const parentRef = useRef<HTMLDivElement>(null);
11

12
  const filteredIcons = Object.entries(icons).filter((icon) =>
13
    icon[1].title.toLowerCase().includes(searchValue)
14
  );
15

16
  const rowVirtualizer = useVirtualizer({
17
    count: filteredIcons.length,
18
    getScrollElement: () => parentRef.current,
19
    estimateSize: () => 66,
20
    gap: 16,
21
  });
22

23
  return (
24
    <div
25
      className="max-h-[calc(100dvh-512px)] min-h-96 overflow-auto"
26
      ref={parentRef}
27
    >
28
      <div
29
        className="relative w-full"
30
        style={{
31
          height: `${rowVirtualizer.getTotalSize()}px`,
32
        }}
33
      >
34
        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
35
          <div
36
            key={virtualRow.key}
37
            className="absolute left-0 top-0 w-full"
38
            style={{
39
              height: `${virtualRow.size}px`,
40
              transform: `translateY(${virtualRow.start}px)`,
41
            }}
42
          >
43
            <AddIconButton icon={filteredIcons[virtualRow.index][1]} />
44
          </div>
45
        ))}
46
      </div>
47
    </div>
48
  );
49
}
50

51
export { IconsList };