map() 함수, props 이용해서 리스트 렌더링하기

1. map()

"배열명".map((it)=>{})
// 배열을 순회함. ('it'은 다른 이름을 붙여줄 수 있다.)

export default function App() {
  const coffee = [
    {
      name: "Latte",
      price: 5000
    },
    { name: "Americano", price: 3500 },
    { name: "Tea", price: 4500 }
  ];
  return (
    <div>
      {coffee.map((it) => {
        return <div>{it.name}</div>;
      })}
    </div>
  );
}

coffee라는 배열 안의 요소들(객체들)을 조회하는 방법은 map()함수를 이용하는 것이다.
제일 먼저 it에 coffee 배열의 첫번째 요소,
{name : "Latte",price : 5000}이 할당된다.
함수의 명령을 수행한 후 다음 요소에 접근하게 되는 것이다.
따라서, {it.name}을 순서대로 출력하면,
Latte
Americano
Tea
이 된다.

+)
"배열명".map((it,idx)=>{})
idx는 인덱스로, 요소의 인덱스에도 접근할 수 있다.

2. props 이용

[coffee.js]

function Coffee({ name, price }) {
  return (
    <div>
      <h1>
        {name}의 가격은 {price}
      </h1>
    </div>
  );
}

export default Coffee;

[App.js]

import Coffee from "./coffee";
export default function App() {
  const coffee = [
    {
      name: "Latte",
      price: 5000
    },
    { name: "Americano", price: 3500 },
    { name: "Tea", price: 4500 }
  ];
  return (
    <div>
      {coffee.map((it) => {
        return (
          <div>
            <Coffee {...it} />
          </div>
        );
      })}
    </div>
  );
}

output :

Latte의 가격은 5000
Americano의 가격은 3500
Tea의 가격은 4500