[React.js] Warning: Each child in a list should have a unique "key" prop. 경고 문구 없애기

리액트 공부중 다음과 같은 경고문을 확인했다.

"key" prop이 없다네.

 

이때 사용된 코드는 다음과 같다.

아주아주 기본적인 코드

 

이 에러를 없애는 방법은 간단하다.

Movie 컴포넌트를 사용할 때, key prop을 넣어주면 된다. 배열을 통해 object들을 저장하고 사용함으로서 key가 요구되는 것 같다. 따라서 "id" 속성을 배열 내 각 object들에 넣어주고, 오브젝트 호출 시 key = {movie.id}를 통해 고유한 key 값을 지정해주면 된다.

 

코드 수정으로 말끔히 사라진 경고문

 

id를 따로 만들어주지 않고, 다른 속성값으로 key prop을 설정해주어도 된다.

하지만 id를 사용하는 것은 데이터의 기본이니, 이런 꼼수보다는 정공법이 나을 거라 생각된다.