Optimizing Code Using the Map Function in Next.js

We regularly review code written every Friday to identify areas for improvement. We discovered repetitive patterns and made changes to optimize the code for improved efficiency and ease of maintenance. This article will explain how to efficiently handle duplicated code using the map function in Next.js.


Existing Code

There was a component rendering multiple social buttons, each having a similar structure with only differences in link URLs and image sources.

components/Home/Button/SocialButton

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

Improved Code

By leveraging JavaScript's map function and arrays, we were able to create code more efficiently. First, we gathered the necessary information for each button (link URL, image source, etc.) into an array. Then, we used the map function to iterate through this array and generate buttons for each item.

components/Home/Button/SocialButton

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

Conclusion

The duplicated code has significantly reduced, making it much easier to add new buttons or modify existing ones. Additionally, the code has become more concise, enhancing readability.

Utilizing JavaScript's map function allows for more efficient handling of repetitive patterns. It can be beneficial not only in React and Next.js but also in any front-end framework that uses JavaScript.