[React] 리스트 데이터 동적 출력

//data.js
export const CORE_CONCEPTS = [
  {
    image: componentsImg,
    title: 'Components',
    description:
      'The core UI building block - compose the user interface by combining multiple components.',
  },
  {
   ...
  },
  ...

import { CORE_CONCEPTS } from "./data.js";

<ul>
  <CoreConcept {...CORE_CONCEPTS[0]} />
  <CoreConcept {...CORE_CONCEPTS[1]} />
  <CoreConcept {...CORE_CONCEPTS[2]} />
  <CoreConcept {...CORE_CONCEPTS[3]} />
</ul>

• 데이터를 출력하기 위해 4개의 CoreConcept 컴포넌트가 사용되고 있다.
• 만약 4개의 데이터 중 한 개가 사라지면 해당 영역에 빈 내용을 보여줄 것이다.
• 불필요한 반복 코드를 줄여야 한다.
• 데이터 소스가 변경되면 컴포넌트의 수가 동적으로 변경되어야 한다.

import { CORE_CONCEPTS } from "./data.js";

<ul>
  {CORE_CONCEPTS.map((item) => (
    <CoreConcept {...item} />
  ))}
</ul>

• map()을 통해 CORE_CONCEPTS 배열의 모든 원소를 가져오고, 각 원소를 <CoreCocept>으로 반환하다.
• …는 스프레드 연산자로 객체의 키값을 모두 가져올 수 있다.
• 하지만 이렇게 하면 경고가 나온다.
  • Warning: Each child in a list should have a unique “key” prop
  • 목록에 있는 각 자녀가 고유의 key 속성을 가져야 한다
• 이 경고를 제거하기 위해선 컴포넌트 안에 key prop을 추가해야 한다.

<ul>
  {CORE_CONCEPTS.map((item) => (
    <CoreConcept key={item.title} {...item} />
  ))}
</ul>

• key는 식별할 수 있는 고유한 값이어야 한다.
• 여기서는 title을 고유한 값으로 쓸 수 있다.