[React다루는기술] 08. map 함수 리액트 사용 예제

in React on React 다루는 기술


map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다. 이 함수는 배열을 순회하면서 각 요소를 변환하거나 추출하는 데 유용하게 사용됩니다. JavaScript에서 map 함수는 함수형 프로그래밍의 일부로서 배열의 요소를 변형하고 새로운 배열을 생성하는 기능을 제공합니다.


var numbers = [1, 2, 3, 4, 5];
var mapExRet1 = numbers.map(function (num) {
  return num * num;
});
console.log(mapExRet1);

var mapExRet2 = numbers.map((num) => num * num);
console.log(mapExRet2);

(5) [1, 4, 9, 16, 25]
(5) [1, 4, 9, 16, 25]


map 함수 컴포넌트 적용 예제

import React from 'react';

// 각 아이템을 렌더링하는 컴포넌트
const Item = ({ text }) => {
  return <li>{text}</li>;
};

// 부모 컴포넌트
const CountryComponent = () => {
  // 아이템 목록 데이터
  const items = ['한국', '미국', '중국', '일본', '영국'];

  return (
    <div>
      <h2>나라 목록:</h2>
      <ul>
        {/* map 함수를 사용하여 각 아이템에 대한 컴포넌트 생성 */}
        {items.map((item, index) => (
          <Item key={index} text={item} />
        ))}
      </ul>
    </div>
  );
};

export default CountryComponent;



2. map 함수 컴포넌트 적용 예제2

import React, { useState } from "react";

const MapFunAddList = () => {
  const [coffees, setCoffees] = useState([
    { id: 1, coffeeName: "아이스아메리카노" },
    { id: 2, coffeeName: "카페라떼" },
    { id: 3, coffeeName: "바닐라라떼" },
  ]);

  const [id, setId] = useState(4);
  const [inputText, setInputText] = useState("");

  const onChange = (e) => setInputText(e.target.value);

  //커피 추가
  const addOnClick = () => {
    //상태 배열을 수정시에는 배열 내장 함수 concat 함수는 새로운 배열을 생성함
    const addCoffees = coffees.concat({ id: id, coffeeName: inputText });

    setId(id + 1);
    setCoffees(addCoffees);
    setInputText("");
  };

  //커피 삭제
  const deleteOnClick = (id) => {
    //상태 배열을 수정시에는 배열 내장 함수 filter 함수는 새로운 배열을 생성함
    const deleteCoffee = coffees.filter((coffee) => coffee.id !== id);
    setCoffees(deleteCoffee);
  };

  const coffeeList = coffees.map((coffee) => (
    <li key={coffee.id} onDoubleClick={() => deleteOnClick(coffee.id)}>
      {coffee.coffeeName}
    </li>
  ));

  return (
    <>
      <input value={inputText} onChange={onChange} />
      <button onClick={addOnClick}>추가</button>
      <ul>{coffeeList}</ul>
    </>
  );
};

export default MapFunAddList;