React.js 기본 사용법(6) - 리스트와 key

이번 포스트에서는 리스트와 key에 대해 알아본다.

 

props 혹은 DB에서 가져오는 데이터가 배열이라면 map 함수를 통해 깔끔하게 넣어줄 수 있다.

import React from "react";

function Pocketmon(props) {
  const monsterList = props.pocketList;
  const pocketMon = monsterList.map((monster) => (
    <li key={monster.id}>
      <b>{monster.name}</b> <span>({monster.type})</span>
    </li>
  ));
  return <ul>{pocketMon}</ul>;
}

function PocketMonList() {
  const pocketList = [
    {
      id: 1,
      name: "피카츄",
      type: "번개",
    },
    {
      id: 2,
      name: "파이리",
      type: "불",
    },
    {
      id: 3,
      name: "꼬부기",
      type: "물",
    },
  ];

  return (
    <div>
      <Pocketmon pocketList={pocketList} />
    </div>
  );
}

export default PocketMonList;

 

pocketList라는 배열 형태의 데이터를 Pocketmon 컴포넌트에 pocketList라는 이름의 props로 전달한다.

Pocketmon 컴포넌트에서는 props를 통해 다시 재정의한 후, map 함수를 통해 리스트를 생성한다.

이 때, unique한 key 값이 필요하다.

 

이렇게 설정한 리스트를 실행해보면 아래와 같은 화면이 출력된다.

 

---

다음 포스트에서는 상태관리인 redux에 대해 알아본다.