[코드분석] 코드에서 key의 의미

이 코드에서 key의 의미 분석

코드 구조 분석

{headerMenus.map((menu, key) => (
  <li key={key}>
    <Link to={menu.src}>
      {menu.icon}{menu.title}
    </Link>
  </li>
))}

두 개의 다른 key 개념

이 코드에는 두 가지 다른 의미의 key가 있습니다:

1. 콜백 함수의 매개변수 key ❌ (문제 있는 부분)

headerMenus.map((menu, key) => ( ... ))

• 여기서 key는 배열의 인덱스를 의미합니다
• 하지만 매개변수 이름으로 key를 사용하는 것은 매우 나쁜 네이밍
• React의 key 속성과 혼동을 일으킵니다

2. JSX의 key 속성 ✅ (React가 요구하는 것)

<li key={key}>

• 여기서 key는 콜백 함수의 두 번째 매개변수(인덱스) 입니다
• React가 요소를 식별하기 위해 사용하는 특수 prop입니다

문제점

1. 혼동을 일으키는 네이밍

// ❌ 나쁜 예: 매개변수 이름을 key로 사용
headerMenus.map((menu, key) => (
  <li key={key}> {/* key가 인덱스를 의미 */}
    {/* 내용 */}
  </li>
))

// ✅ 좋은 예: 명확한 매개변수 이름 사용
headerMenus.map((menu, index) => (
  <li key={index}> {/* 명확하게 인덱스임을 표현 */}
    {/* 내용 */}
  </li>
))

2. 인덱스를 key로 사용하는 것의 한계

// ⚠️ 주의: 인덱스 key는 특정 상황에서만 사용
headerMenus.map((menu, index) => (
  <li key={index}> {/* 순서가 변경되지 않을 때만 안전 */}
    {/* 내용 */}
  </li>
))

개선된 코드 제안

방법 1: 인덱스 사용 (간단한 경우)

{headerMenus.map((menu, index) => (
  <li key={index}>
    <Link to={menu.src}>
      {menu.icon}{menu.title}
    </Link>
  </li>
))}

방법 2: 고유 ID 사용 (권장)

// headerMenus 데이터가 다음과 같은 구조라고 가정
const headerMenus = [
  { id: 1, title: '홈', src: '/', icon: '🏠' },
  { id: 2, title: '소개', src: '/about', icon: 'ℹ️' },
  { id: 3, title: '연락처', src: '/contact', icon: '📞' }
];

{headerMenus.map((menu) => (
  <li key={menu.id}> {/* ✅ 고유 ID 사용 */}
    <Link to={menu.src}>
      {menu.icon}{menu.title}
    </Link>
  </li>
))}

방법 3: 안정적인 key 생성

{headerMenus.map((menu) => (
  <li key={`menu-${menu.title}-${menu.src}`}> {/* 고유한 문자열 조합 */}
    <Link to={menu.src}>
      {menu.icon}{menu.title}
    </Link>
  </li>
))}

원본 코드의 실제 동작

원본 코드는 기술적으로 동작하지만:

{headerMenus.map((menu, key) => ( // key = 0, 1, 2, ...
  <li key={key}> {/* key={0}, key={1}, key={2}, ... */}
    {/* 내용 */}
  </li>
))}

• map의 두 번째 매개변수는 자동으로 인덱스(0, 1, 2, ...)를 전달
• 이 인덱스를 React의 key prop으로 사용
• 동작은 하지만 가독성이 떨어지고 혼란을 야기

결론

원본 코드에서의 key 의미:

1. (menu, key)의 key → 배열의 인덱스 (0, 1, 2, ...)
2. <li key={key}>의 key → React의 고유 식별자 prop

개선 권장:

• 매개변수 이름을 index로 변경하여 명확성 향상
• 가능하면 인덱스 대신 고유 ID를 key로 사용
• 인덱스를 key로 사용할 때는 순서 변경 가능성 고려

// 최종 개선안
{headerMenus.map((menu, index) => (
  <li key={menu.id || index}> {/* ID 있으면 ID, 없으면 인덱스 */}
    <Link to={menu.src}>
      {menu.icon}{menu.title}
    </Link>
  </li>
))}

Bedeutung des Schlüssels im Code