[React.js] map, object, return

map 메서드

map은 function을 취해서 그 function을 array의 각 item에 적용함 그리고 각 연산의 결과로 array를 만들고, 각 연산의 result는 항상 0임

=> [0, 0, 0, 0] array가 됨 (return 0을 item마다 해줬기 때문)

return current(argument)를 했을 경우, 원래 배열값이 그대로 적용됨

위와 같이 무언가 연산을 해서 return할 수도 있음

props 2개를 활용한 map 예제

import React from "react";
// react 사용시 필수 선언

function Food({ name, picture }) {
// name과 picture은 아래 object에서 정의한 props
  return (
    <div>
      <h2>I like {name}</h2> // name props 사용
      <img src={picture}> /> // image props 사용
    </div>
  );
}

function App() {
  return (
    <div className="App">
      {foodILike.map((dish) => (
        <Food name={dish.name} picture={dish.image} />
      ))}
    </div>
  );
} // function Food에 dish(foodILike의 Element)를 map으로 1번씩 props인 name과 picture를 전달함. 여기서 <Food name={dish.name} picture={dish.image} /> 이 없다면, name과 picture를 argument로 사용하는 function Food는 제대로 동작하지 않음

const foodILike = [
  // foodILike Object 선언
  {
    name: "kimchi",
    image:
      "https://kstory365.files.wordpress.com/2015/01/kimchi-01-cabbage.jpg",
  },
  {
    name: "ramen",
    image:
      "https://i.huffpost.com/gen/1410937/thumbs/o-RAMEN-facebook.jpg#Ramen%202000x1000",
  },
  {
    name: "samgyeopsal",
    image:
      "https://www.gildedgingerbread.com/wp-content/uploads/2017/08/Samgyeopsal-1.jpg",
  },
  {
    name: "kimbap",
    image:
      "https://www.maangchi.com/wp-content/uploads/2007/08/gimbap_plate.jpg",
  },
  {
    name: "bibimbap",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Dolsot-bibimbap.jpg/1200px-Dolsot-bibimbap.jpg",
  },
];

export default App;

실행결과

위와 같이 잘 실행 되는 것을 확인할 수 있는데, console창에는 2가지 warning이 존재한다.

key값과 alt값

위와 같은 2가지 warning이 존재하게 되는데 그 해결 방법은 아래와 같다.

key값

각각 list 내의 child는 unique한 key prop을 가져야 함

즉 모든 react의 element는 유일해야 하고 이들을 list 안으로 집어넣을때, element는 유일성을 잃어버림

const foodILike = [
  {
    id: 1,
    name: "kimchi",
    image:
      "https://kstory365.files.wordpress.com/2015/01/kimchi-01-cabbage.jpg",
  },
  {
    id: 2,
    name: "ramen",
    image:
      "https://i.huffpost.com/gen/1410937/thumbs/o-RAMEN-facebook.jpg#Ramen%202000x1000",
  },
  {
    id: 3,
    name: "samgyeopsal",
    image:
      "https://www.gildedgingerbread.com/wp-content/uploads/2017/08/Samgyeopsal-1.jpg",
  },
  {
    id: 4,
    name: "kimbap",
    image:
      "https://www.maangchi.com/wp-content/uploads/2007/08/gimbap_plate.jpg",
  },
  {
    id: 5,
    name: "bibimbap",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Dolsot-bibimbap.jpg/1200px-Dolsot-bibimbap.jpg",
  },
];

위와 같이 Object foodILike에 id 라는 새로운 props를 추가했고, 다음과 같이 id를 key값으로 활용할 것이다.

function App() {
  return (
    <div className="App">
      {foodILike.map((dish) => (
        <Food key={dish.id} name={dish.name} picture={dish.image} />
      ))}
    </div>
  );
}

그러면 해당 오류가 사라지는 것을 확인할 수 있다.

alt값

모든 <img> 태그에는 alt값이 필요하다는 warning에 대한 해결 방법이다.

function Food({ name, picture }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} alt={name}/>
    </div>
  );
}

다음과 같이 alt 값을 추가함으로서 해결할 수 있다.