만들면서 배우는 react : 기초 - 8

오늘은 리스트에 대해서 알아보려고 한다.
리스트는 다룰 일이 정말정말 많다.
그러므로 꼭꼭 알아둬야 할 것이다!

---

function Favorites() {
  const CAT1 = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
  const CAT2 = "https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
  const CAT3 = "https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript";
  const cats = [CAT1, CAT2];

  return (
    <ul className="favorites">
      {cats.map(cat => <CatItem img={cat}>)}
    </ul>
  );
}

cats라는 배열을 만들었다…!
그걸 map을 이용해서 하나씩 뽑아썼다.
이렇게 하면 성공적으로 배열 순회를 한다.
참고로, map() 메서드는 배열 내의 모든 요소 각각에 대하여
주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다..

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

그런데 이렇게 오류가 발생한다… ㅠ_ㅜ
잘 보면 unique한 key 가 필요하다는 것이다.
이 오류는 간단하게 해결이 가능한데, 그냥 key를 정해주기만 하면 된다.

function Favorites() {
  const CAT1 = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
  const CAT2 = "https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
  const CAT3 = "https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript";
  const cats = [CAT1, CAT2];
  return (
    <ul className="favorites">
      {cats.map(cat => <CatItem img={cat} key={cat} />)}
    </ul>
  );
}

바로 이렇게…!!!
key 값을 unique한 값으로만 지정해주면 오류는 사라진다~.~
앞으로 새로운 값들이 들어올 때마다, 리스트로 사용하면 편리하당..!!
map 메서드에 대한 사용법을 확실하게 숙지하도록 하잡! ㅎㅎ