[React] Each child in a list should have a unique "key" prop.

 

Each child in a list should have a unique "key" prop.

 

해당 오류는 리액트를 사용하며,

LIST를 JSX를 사용하여 UI에 출력할 때 발생한다.

 

      <ul>
        {toDoList.map((element) => {
          return <li>{element}</li>;
        })}
      </ul>

toDoList라는 Javascript List를 map함수를 이용하여

각 리스트 요소마다를 <li> {element} </li> 로 변환하여 반환해주는 작업이다.

결과적으로는 

 

위와같이 성공적인 동작을 보장하지만,

콘솔에서는 아래와같은 에러 로그가 찍히게된다.

 

이것은 생성되는 각 요소들마다 unique한 key 속성이 필요하다는 의미이다.

요소들마다 고유의 key값을 넣어줘야 되므로 고민이 있겠지만..

우리가 사용하는 map함수를 살펴보면 위와같은데,

전체를 보지말고 이번의 핵심인 부분만 살펴보자면 

 

(value:any, index:number, array:any[]) 의 중간인 index부분이다.

map함수에서는 각 순서마다 고유의 index값을 두 번째 인자로 제공한다.

따라서 우리는

      <ul>
        {toDoList.map((element, index) => {
          return <li key={index}>{element}</li>;
        })}
      </ul>

위 처럼 처리해주면 각 요소마다 고유의 key값을 간단하게 설정해 줄 수 있게된다.