[React] Key Warnings 해결 방법

Map함수를 사용하여 반복되는 컴포넌트 혹은 JSX 요소 들을 랜더링 하다 보면 key Warning라는 오류가 콘솔창에 뜨는 것을 자주 볼 수 있다. 예시 import React from 'react'; import './App.css'; function App() { const iter = [0,1,2] return ( <div> { iter.map(item => <h1>item</h1>) } </div> ) } export default App; 해당 소스 코드 입력 후 localhost:3000에 접속하면 개발자 도구(F12)에 이미지와 같은 오류가 뜨는 것을 확인할 수 있다. 에러를 간단히 읽어보면 유니크한 key가 필요함을 알 수 있다. div 안에 iter.map 부분을 아래와 같이 바꾸면 에러가 사라진다. iter.map(item => <h1 key={item}>item</h1>) 왜 리액트는 key를 사용자가 수동으로 선언을 해야 하나? virtual DOM이 업데이...

원문링크 : [React] Key Warnings 해결 방법