Coworkers - 팀 페이지 구현(빌드 오류 해결)

5. Key값 관련 빌드 오류 및 해결 방법

⚠️ 발생한 문제

배열의 key 값으로 index를 사용하여 렌더링했을 때, React에서 경고가 발생하며 빌드가 실패함.

Error: Do not use Array index in keys  react/no-array-index-key

🔍 원인 분석

React는 각 요소의 변경을 추적하기 위해 key 값을 사용하는데, index를 key로 사용하면 요소의 순서가 변경될 때 불필요한 리렌더링이 발생할 가능성이 있음.
이는 특히 드래그 앤 드롭, 필터링, 정렬 등 리스트의 순서가 바뀔 수 있는 경우에 문제가 될 수 있음.

❌ 첫 번째 해결 시도: crypto.randomUUID()

crypto.randomUUID() 사용하여 key 값 생성

• UUID를 생성하여 key로 사용하면 중복 방지 가능할 것으로 기대
• 하지만, 모바일 환경(갤럭시, iOS 등)에서 crypto.randomUUID()가 지원되지 않는 문제 발생

TypeError: crypto.randomUUID is not a function

✅ 최종 해결 방법: getRandomId() 함수 사용

getRandomId() 함수로 key 값 생성
👉 직접 랜덤 문자열을 생성하는 함수를 만들어 key 값으로 활용

const getRandomId = () => {
  let keyValue = '';
  const characters =
    '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const keyLength = 16;

  for (let i = 0; i < keyLength; i += 1) {
    const idx = Math.floor(Math.random() * characters.length);
    keyValue += characters[idx];
  }

  return keyValue;
};

export default getRandomId;

🎯 적용 후 개선된 점

✅ React의 key 관련 경고 해결 → index 대신 고유한 key를 사용하여 불필요한 리렌더링 방지
✅ 모바일 환경에서도 정상 동작 → crypto.randomUUID() 미지원 문제 해결
✅ 동일한 컴포넌트가 여러 번 렌더링될 때도 고유 ID 유지 → 예상치 못한 UI 변경 방지

📌 관련 PR 모음

• crypto.randomUUID() 사용하여 key 값 생성
• getRandomId() 함수로 key 값 생성