😁 자바스크립트 배열의 map() 함수

arr.map(callback, [thisArg]

calback 함수의 세 가지 파라미터

1. currentValue

• 현재 처리하고 있는 요소

2. index

• 현재 처리하고 있는 요소의 index 값

3. array

• 현재 처리하고 있는 원본 배열

thisArg

• callback 함수 내부에서 사용할 this 레퍼런스

😋 데이터 배열을 컴포넌트 배열로 변환하기

간단한 예시 코드

import React from "react";

const IterationSample = () => {
  const names = ["susan", "colemann", "walker"];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>);

  return <ul>{nameList}</ul>;
};

export default IterationSample;

😎 Key 응용

특정 컴포넌트를 추가하고 삭제하기

import React, { useState } from "react";

const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: "눈사람" },
    { id: 2, text: "논사람" },
    { id: 3, text: "난사람" },
    { id: 4, text: "넌사람" }
  ]);
  const [inputText, setInputText] = useState("");
  const [nextId, setNextId] = useState(5);

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

  const onClick = () => {
    const nextNames = names.concat({ id: nextId, text: inputText });
    setNames(nextNames);
    setNextId(nextId + 1);
    setInputText("");
  };

  const onRemove = (id) => {
    const nextNames = names.filter((name) => name.id !== id);
    setNames(nextNames);
  };

  const nameList = names.map((name) => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
  ));

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

export default IterationSample;