Next.js에서 Map 함수를 활용한 코드 효율화

여러 개의 소셜 버튼을 렌더링하는 컴포넌트가 있었고, 각 버튼은 유사한 구조를 가지고 있습니다. 링크 URL과 이미지 소스만 다릅니다.

<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://kakao.gg">
            <Image alt="home" width={32} height={32} src="img" />
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://lol.kakao.gg">
            <Image alt="리그오브레전드_메인" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://lostark.kakao.gg">
            <Image alt="lostark_kakao_gg" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://maple.kakao.gg">
            <Image alt="maple_kakao_gg" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://blog.kakao.gg">
            <Image alt="카카오_블로그" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>

개선 코드

const buttons = [
    { href: 'https://kakao.gg', alt: 'home', src: 'img' },
    {
        href: 'https://lol.kakao.gg',
        alt: '리그오브레전드_메인',
        src: 'img',
    },
    {
        href: 'https://lostark.kakao.gg',
        alt: 'lostark_kakao_gg',
        src: 'img',
    },
    {
        href: 'https://maple.kakao.gg',
        alt: 'maple_kakao_gg',
        src: 'img',
    },
    {
        href: 'https://blog.kakao.gg',
        alt: '카카오_블로그',
        src: 'img',
    },
]

 {buttons.map((button) => (
    <button key={button.href} className={`group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out`}>
      <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href={button.href}>
          <Image alt={button.alt} width={32} height={32} src={button.src} />
        </Link>
      </div>
    </button>
  ))}