나만의 코드 공방

코드로 놀고, 언어로 성장하는 공방.

프로그래밍 언어/REACT

map() 함수로 컴포넌트 많이 만들기

· 코딩마이데이

map() 함수 사용법 알아보기

크롬 브라우저에서 콘솔을 연 다음 다음과 같이 코드를 입력해주세요.

const friends = ["dal", "mark", "lynn", "koren girl"]

 

콘솔에 friends를 입력해보면 아래와 같이 친구 4명의 이름이 배열로 저장된 것을 확인할 수 있습니다.

 

map() 함수는 배열의 모든 원소마다 특정 작업을 하는 함수를 적용하고, 그 함수가 반환한 결과를 모아서 반환해주는 것을 말합니다.

const friends = ["sally", "yun", "hun", "korean girl"] 

friends.map(current => {
    console.log(current);
    return 0;
})

 

실행 결과

sally // console.log(current)가 출력한 값(1번째)
yun // console.log(current)가 출력한 값(2번째)
hun // console.log(current)가 출력한 값(3번째)
korean girl // console.log(current)가 출력한 값(4번째)
[0, 0, 0, 0] // friends.map(...)이 최종으로 반환한 값입니다.

 

map() 함수의 2가지 특징

 

  1. map() 함수의 인자로 전달한 함수는 배열 원소를 대상으로 실행합니다.
  2. 그 함수가 반환한 값이 모여 배열이 되고, 그 배열이 map() 함수의 반환값이 된다는 것입니다.
friends.map(function(friend) {
	return friend + " ♥"
})

 

실행 결과

['sally ♥', 'yun ♥', 'hun ♥', 'korean girl ♥']

 

App.js

import React from "react";

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

const foodILike = [
  {
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

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

export default App;

 

실행 결과

 

 

map() 함수의 인지로 함수 전달하기

import React from "react";

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

const foodILike = [
  {
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

function App() {
  return <div>{foodILike.map(renderFood)}</div>;
}

export default App;

 

renderFood() 함수 정의하기

import React from "react";

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

const foodILike = [
  {
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

function renderFood(dish) {
  return <Food name={dish.name} picture={dish.image} />;
}

function App() {
  return <div>{foodILike.map(renderFood)}</div>;
}

export default App;

 

map() 함수의 첫 번째 인자로 전달한 화살표를 밖으로 빼서 일반 함수 renderFood()로 작성했을 뿐 결과는 달라 지지 않습니다.

실행 결과

 

 

map() 함수의 1번째 인자로 전달할 renderFood() 함수를 분리했습니다.

 

map() 함수의 반환값 살펴보기

import React from "react";

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

const foodILike = [
  {
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

function renderFood(dish) {
  return <Food name={dish.name} picture={dish.image} />;
}

function App() {
  console.log(foodILike.map(renderFood));
  return <div>{foodILike.map(renderFood)}</div>;
}

export default App;

 

위 [Console]탭을 보면 Array(5)가 보입니다. ▶를 눌러서 펼처보면 이상한 배열 들이 출력되고 있습니다.

이게 바로 map() 함수가 반환한 리액트 컴포넌트입니다.

 

import React from "react";

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

const foodILike = [
  {
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

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

export default App;

 

App.js 파일 안에 또다른 함수를 만들면 나중에 관리하기 어려워지기 때문에  위 코드대로 App.js를 원래대로 돌려놓습니다.

 

map() 함수로 만든 컴포넌트에 key props 추가하기

 

리액트의 원소들은 유일해야 하는데 리액트 원소가 리스트에 포함되면서 유일성이 없어진것입니다.

 

이 문제를 해결하기 위해 foodILike 배열 원소에 id라는 값을 추가합니다.

import React from "react";

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

const foodILike = [
  {
    id: 1,
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    id: 2,
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    id: 3,
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    id: 4,
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    id: 5,
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

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

export default App;

 

리액트에게 컴포넌트가 서로 다르다는 것을 알려주는 빙법이 key props를 추가합니다.

Food 컴포넌트에 key props의 값으로 {dish.id}를 전달하면 됩니다.

import React from "react";

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

const foodILike = [
  {
    id: 1,
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    id: 2,
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    id: 3,
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    id: 4,
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    id: 5,
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

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

export default App;

 

[Console] 텝을 확인해보면 경고 메시지가 없어졌습니다.

다만, key props 는 리액트 내부에서 사용되는 특수한 props라서 Food 컴포넌트에 직접 전달되지 않습니다.

 

img 엘리먼트에 alt 속성 추가하기

import React from "react";

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

const foodILike = [
  {
    id: 1,
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    id: 2,
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    id: 3,
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    id: 4,
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    id: 5,
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

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

export default App;

 

'프로그래밍 언어 > REACT' 카테고리의 다른 글

state로 숫자 증감 기능 만들어보기  (0) 2025.01.31
prop-types 추가하기  (0) 2025.01.30
비슷한 컴포넌트 여러 개 만들기  (0) 2025.01.27
props  (1) 2025.01.26
JSX  (0) 2025.01.25

티스토리툴바