[React] list unique "key" 오류

아래와 같이 titleMap 배열을 map 함수를 사용하여 렌더링했는데 오류가 발생했다.

  <div className={styles.aContent}>
            {titleMap.map((t, idx) => (
              <div>
                <h3 className={styles.title}>{t.title}</h3>
                <h3 className={styles.content}>{t.content}</h3>
              </div>
            ))}
</div>

"Each child in a list should have a unique 'key' prop" 경고는 React에서 배열로 렌더링되는 컴포넌트 리스트의 각 자식 요소에 고유한 "key" 속성이 지정되어야 함을 나타낸다.

이 경고는 key 속성이 없거나 중복된 key 속성이 있는 경우에 발생

이러한 key 속성은 React가 각 요소를 식별하고 추적하는 데 사용되며, 성능 최적화와 업데이트 처리에 중요한 역할

아래와 같이 각 자식 요소에 고유한 key 속성을 추가하여 경고를 해결

   <div className={styles.aContent}>
            {titleMap.map((t, idx) => (
              <div key={idx}>
                <h3 className={styles.title}>{t.title}</h3>
                <h3 className={styles.content}>{t.content}</h3>
              </div>
            ))}
          </div>