[ javascript ] map 함수 사용법 연습

App.js

import React from "react";


function App() {
  return (
    <div>
      <div>
        {foodLike.map((dish) => (
          <Food name={dish.name} picture={dish.image} />
        ))}
      </div>
      <div>
        {animalLike.map((animal) => {
          return <Animal name={animal.name} image={animal.image} />;
        })}
      </div>
    </div>
  );
}

// 아래 코드들
// ~~~~
// ~~~~
// ~~~~
export default App;

• App에서는 음식과 동물 이름, 사진을 각 배열의 map 함수를 사용해서 필요한 컴포넌트에 props를 전달한다.
• map 함수를 사용할 때, return하는게 하나라면? {} 중괄호를 사용하지 않고 arrow function을 사용할 수 있다.
• HTML에서 JavaScript를 사용하려면 {}중괄호를 여닫아 사용한다.

음식, 동물 배열

const foodLike = [
  {
    name: "Kimchi",
    image:
      "http://m.gochoochongak.com/web/product/big/201810/1cf1eb74d9cbb972ee0fd10d7f25e49c.jpg",
  },
  {
    name: "Samgyeopsal",
    image:
      "https://cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/IZOXUQBP4QVT4ONUPAIDA6347M.jpg",
  },
];


const animalLike = [
  {
    name: "Cat",
    image:
      "https://lh3.googleusercontent.com/proxy/r5jeZp4_QMUouVDfKBWedaIhumFycKWgYa0LYorDNtIfixsjOBPBj-UH3HXe2Q3qoQhUoQeXCpGQQsC4c37tjoRF2AJo7e4rpzKPUION9QHkoKIoeAE",
  },
  {
    name: "Bird",
    image:
      "https://image.freepik.com/free-vector/xantus-bird-cartoon-humming-bird-flying-colibri_125446-419.jpg",
  },
];

• 아직 서버에서 데이터를 직접 받아오는 방법을 알지 못하기 때문에 임의 데이터 배열을 만들어서 사용한다.
• 각 배열은 name과 image를 property로 가지고 있다.
• 이 배열의 프로퍼티들을 각 컴포넌트의 props로 전달한다.

Component

function Food({ name, picture }) {
  return (
    <div>
      <h3>{name}</h3>
      <img src={picture} alt="" />
    </div>
  );
}

function Animal({ name, image }) {
  return (
    <div>
      <h2>{name}</h2>
      <img src={image} alt="" />
    </div>
  );
}

• 각 컴포넌트에서는 전달 받은 props들을 출력하는 JSX를 반환한다.
• JSX : JavaScript와 HTML을 사용한 문법
• img 태그는 alt property를 빈문자라도 사용해야 한다.