[React] 리스트 렌더링

1) map()을 사용하여 배열을 컴포넌트로 렌더링
2) filter()를 사용하여 특정 컴포넌트만 렌더링
3) key를 사용해서 리스트 항목을 순서대로 유지

다음과 같은 객체 리스트가 있다!

var PokeData = [
  {
    name: "Bulbasaur",
    height: "7",
    weight: "69",
    types: ["grass", "poison"],
    "base-Experience": "64",
    abilities: ["overgrow", "chlorophyll"],
    hp: "45",
    attack: "49",
    defense: "49",
    "special-attack": "65",
    "special-defense": "65",
    speed: "45",
  },
  {
    ....}
];

export default PokeData;

1. map()을 사용하여 배열을 컴포넌트로 랜더링

export default function List() {
  const listItems = pokemons.map(pokemon =>
    <li>{pokemon}</li>
  );
  return <ul>{listItems}</ul>

2. filter()를 사용하여 특정 컴포넌트만 랜더링

const grass_type = pokemons.filter(pokemon =>
  pokemon.types === 'grass'
);

filter로 걸러낸 리스트를 다시 매핑 가능

  const listItems = grass_type.map(pokemon =>
    <li>{pokemon}</li>
  );

3. key를 사용해서 리스트 항목을 순서대로 유지

key를 사용하지 않으면 Warning: Each child in a list should have a unique “key” prop. 에러가 뜬다. React가 변화를 파악하고 DOM을 올바르게 업데이트 하는 데 도움을 준다. 따라서 map() 함수 호출 시에는 꼭 key를 사용하는 습관을 … !!

• 데이터베이스에서 키를 가져올 때는 데이터베이스의 고유한 ID 사용 가능
• 로컬에서 키를 만들 때는 [crypto.randomUUID()](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) 또는 [uuid](https://www.npmjs.com/package/uuid) 같은 패키지 사용 가능

⚠️ array의 index를 key로 사용하는 것은 지양하자. array의 순서가 바뀐다면 혼란스러워집니다.

⚠️ key={Math.random()} 처럼 즉석에서 키 생성 지양하자 → 랜더링 할 때마다 key가 일치하지 않을 수 있어 모든 컴포넌트와 DOM이 재생산된다. 성능을 크게 저하시킴

https://ko.react.dev/learn/rendering-lists
리액트 공식문서