return (
  <>
  <PrevieCard imgSrc={""} title={""} subtitle={""} author={""} />
  <PrevieCard imgSrc={""} title={""} subtitle={""} author={""} />
  <PrevieCard imgSrc={""} title={""} subtitle={""} author={""} />
  <PrevieCard imgSrc={""} title={""} subtitle={""} author={""} />
  <PrevieCard imgSrc={""} title={""} subtitle={""} author={""} />
  <PrevieCard imgSrc={""} title={""} subtitle={""} author={""} />
  </>
)

여러개의 프리뷰카드가 아니 여러개의 컴포넌트를 렌더링을 해야할때는 이렇게 반복적으로 적어도 좋다. 하지만 이러면 되게 보기도 별로고 가독성도 떨어지는거 같다 그래서
Array.prototype.map을 활용해서 렌더를을 해볼것이다.

Return ( 
<>
  Preview.map((preview) => {
<PrevieCard {preview}/>
})

위 같은 방식으로 map을 활용해서 코드를 작성하면 한줄에 여러번의 컴포넌트들을 반복시킬수 있습니다.

하지만 Warning: Each child in a list should have a unique "key" prop. 콘솔창을 띄어보면 이런식의 워닝 메세지를 확인할수 있습니다.
고유의 키를 줘야한다는 말 같은데

Return ( 
<>
  Preview.map((preview) => {<PrevieCard {preview} key={id}/>
})
</>

이렇게 주면 된다. 이 key는 왜 줘야할까여?

Key는 왜 필요 할까?

예를 들어서 map을 사용해서 100개의 컴포넌트를 렌더링을 한다고 하면 리액트 입장에선
여간 귀찮은 일이 아니다. 계속 map을 다시 돌면서 이전 렌더링 된 요소들과 비교하는데
그때 어떤 요소가 바뀌면 돔으로 들어가 변경사항이 적용이 된다 그 많은 엘리먼트 사이에서 어떤 요소가
변경되었을까 파악을 하는 과정을 도와주기에 필요하다.

엘리먼트에 안정적인 고유성을 부여하기 위해서 배열 내부 엘리먼트에 지정을 해야한다.

Key로 컴포넌트 추출을 해보기

function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

위에 방식은 잘못된 방식이다. ListItem 컴포넌트를 추출시 ListItem안에 있는 리스트 엘리먼트가 아니라 엘리먼트가 key를 가져야한다.

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

JSX에 포함시키기

이것은 별도의 변수를 설정하고 JSX포함을 하면 된다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Map()함수의 결과를 인라인으로도 처리가 가능하다.

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}