Next.js에서 Map 함수를 활용한 코드 효율화
KUKJIN LEE • 1년 전 작성
매주 금요일 작성된 코드를 다시 한 번 살펴보고 개선할 수 있는 부분이 있는지 확인하고 있습니다. 반복되는 패턴을 발견할 수 있었고, 코드의 효율성을 높이고 유지 관리를 용이하게 하기 위해 수정을 통해 코드를 효율화할 수 있습니다. 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>
개선 코드
JavaScript의 map 함수와 배열을 활용하여 코드를 효율적으로 만들 수 있었습니다. 먼저, 각 버튼에 필요한 정보(링크 URL, 이미지 소스 등)를 배열로 만듭니다. 그리고 이 배열을 map 함수로 순회하면서 각 항목에 대한 버튼을 생성하였습니다.
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>
))}
정리
중복된 코드가 크게 줄어들었고, 나중에 새로운 버튼을 추가하거나 기존의 것을 수정할 때도 훨씬 쉬워졌습니다. 또한 코드가 간결해지면서 가독성도 향상되었습니다.
JavaScript의 map 함수를 활용하면, 반복적인 패턴을 보다 효율적으로 처리할 수 있습니다. React 및 Next.js뿐만 아니라 JavaScript를 사용하는 모든 프론트엔드 프레임워크에서 유용하게 활용될 수 있습니다.
