반복되는 코드 줄이기

(비록 협업할 사람도 없이 혼자 하는 프로젝트지만) 시간에 쫓겨 와다닥 만든 컴포넌트들 정리하는중.. ㅋㅋ

오늘의 타겟은 이 Pagination 컴포넌트 만들때 사용한 select와 button들 입니다. 

shadcn의 button과 select를 기반으로 만들었습니다. 

 

1. Select

- 기존 코드

        <Select
          value={selectedValue}
          onValueChange={(value) => setSelectedValue(value)}
        >
          <SelectTrigger className="w-[70px] h-9 border" isPagination={true}>
            {selectedValue}
          </SelectTrigger>
          <SelectContent className="w-[120px]">
            <SelectItem value="20">20</SelectItem>
            <SelectItem value="50">50</SelectItem>
            <SelectItem value="100">100</SelectItem>
          </SelectContent>
        </Select>

 

- 수정 후 코드 

: 반복되는 SelectItem 부분을 map을 사용하여 정리

        <Select value={selectedValue} onValueChange={(value) => setSelectedValue(value)}>
          <SelectTrigger className="w-[70px] h-9 border" isPagination={true}>
            {selectedValue}
          </SelectTrigger>
          <SelectContent className="w-[120px]">
            {["20", "50", "100"].map((value) => (
              <SelectItem key={value} value={value}>
                {value}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

 

 

2. Button

- 기존코드

      <div className="flex gap-2 items-center">
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-double-arrow-left.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-caret-left.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-caret-right.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
        <Button className="rounded-md border bg-[#09090B] hover:bg-[#27272A] shadow-sm w-8 h-8 p-0">
          <Image
            src="/icon-double-arrow-right.svg"
            className="cursor-pointer"
            alt="logo"
            width={16}
            height={16}
          />
        </Button>
      </div>

 

- 수정 후 코드

: 반복되는 부분 전부 map을 사용하여 정리,

icon마다 달라지는 src부분은 배열로 따로 빼서 관리

const icons = [
    { src: "/icon-double-arrow-left.svg", alt: "Double Left Arrow" },
    { src: "/icon-caret-left.svg", alt: "Caret Left" },
    { src: "/icon-caret-right.svg", alt: "Caret Right" },
    { src: "/icon-double-arrow-right.svg", alt: "Double Right Arrow" }
  ];


      <div className="flex gap-2 items-center">
        {icons.map((icon) => (
          <Button key={icon.alt} className={buttonClass}>
            <Image src={icon.src} alt={icon.alt} width={16} height={16} className="cursor-pointer" />
          </Button>
        ))}
      </div>