[ReactJS] ReactJS로 영화 웹 서비스 만들기 (7) - Map

Map을 좀더 연습하기위해 기존의 코드를 고쳐보자.

기존의 코드                                                                              바꾼 코드

 

콘솔 로그를 찍으면 어떻게 나올까?

뭔가 이상한게 잔뜩 나온다. 이것들은 기본적으로 react component이다.

따라서 여기에 Food component와 같은 array를 가져오는 것이다.

 

기존코드와 기능은 완전히 똑같다. 하지만 기존의 상태가 더 좋다. 다른 function을 만들 필요는 없다.

 

그렇다면 error는 뭐지?

읽어보면 각각의 list 내의 child는 unique한 key prop을 가져야 한다고 말하고 있다.

모든 react 의 element들은 유일해야한다. 즉, 내가 이들을 list에 집어넣을 때, 유일성을 잃어버린다는 의미이다.

따라서 iteml들에 각각의 id를 부여해주자. react의 모든 element 들은 다르게 보일 필요가 있기 때문이다.

아직 부족하다. react는 똑똑하지 않아서 모든 element들이 같다고 생각할 것이다. 따라서 Food component에 prop을 주어야한다. 그리고 그 prop이 바로 key이다.

key = {dish.id}

 

이제 콘솔의 error는 사라졌다.

 

아, 저 warning은 이미지에 alt를 안넣어줘서 나오는 경고이다. alt = {name}을 추가해보면,

 

콘솔창이 완벽히 깔끔해졌다.