[React] 같은 component의 list를 render할 때

todolist를 React로 다시 한 번 만들어 보면서 발생한 에러를 정리한다.

list의 원소들을 화면에 뿌려주면서 타나난 Warning인데,

Error : 같은 component의 list를 render할 때, key라는 prop을 넣어줘야 한다.

라는 뜻이다. react가 기본적으로 list에 있는 모든 item들을 인식하기 때문이다.

 

{/* 에러가 발생한 코드 */}
	  <ul>
        {todos.map((item) => <li>{item}</li>)}
      </ul>

{/* 변경한 코드 */}
      <ul>
        {todos.map((item, index) => <li key={index}>{item}</li>)}
      </ul>