[React] 카드 여러장 한번에 생성하기: Key, Value를 사용

JavaScript의 객체에 key와 value를 저장할 수도 있습니다. 이는 파이썬의 dictionary와 유사하며 이렇게 객체를 사용할 때의 장점은 다음과 같습니다.

1. key값을 알면 value를 바로 조회할 수 있습니다.

2. 배열보다 자료의 추가, 삭제가 쉽습니다.

 

만약 카드를 여러장 생성하여 이 각각의 카드에 key와 value값을 보여주어야 한다면 iterator로 읽어오면 됩니다.

const dog = [
  [
    "말티즈",
    "https://cdn.pixabay.com/photo/2019/02/24/12/58/maltese-4017525_1280.jpg",
  ],
  [
    "시츄",
    "https://cdn.pixabay.com/photo/2015/07/26/00/26/dog-860709_1280.jpg",
  ],
  [
    "푸들",
    "https://cdn.pixabay.com/photo/2018/09/30/16/08/poodle-3713803_1280.jpg",
  ]
];

return (
    <div className={styleType}>
      {dog.map((src) => (
        <div
          key={src}
          className={styles.card}
          style={{
            backgroundImage: `url(${src[1]})`,
          }}
        >
          <div className={styles.cardText}>{src[0]}</div>
        </div>
      ))}
    </div>
  );

객체 dog에는 강아지 이름이 key값으로, 강아지에 해당하는 사진의 URL이 value값으로 저장되어 있습니다.

dog.map()에 전달된 메소드에서 src가 iterator에 해당하며 src의 src[0]로 강아지 이름을, src[1]로 URL을 읽어올 수 있습니다.

src는 dog 내부의 원소들을 하나씩 읽어오며 className이 styles.card인 <div>를 생성하고 src[1]에 해당하는 이미지를 backgroundImage로 설정하며 src[0]에 해당하는 텍스트를 이미지에 오버레이 시킵니다.

 

그 결과는 다음과 같습니다.