map

アレイ内の要素の一括変換
代替
アレイを迂回して置換アレイに戻る(置換後に元のアレイに戻る)->元のアレイと同じ数
アレイ内のオブジェクトも使用可能

arr.map((el) => ({name : el.key+"어린이"}))

(elはelement)

arr.map((el) => el+"어린이")

矢印関数では、カッコ内に1行のコードがある場合は、カッコを省略できます.
ただし、オブジェクトを受信している場合は、カッコは省略します.
オブジェクトの括弧は関数の括弧になるべきではありません

HTMLでmap関数

を使用

const FRUITS = [
  { number: 1, title: "레드향" },
  { number: 2, title: "샤인머스켓" },
  { number: 3, title: "산청딸기" },
  { number: 4, title: "한라봉" },
  { number: 5, title: "사과" },
  { number: 6, title: "애플망고" },
  { number: 7, title: "딸기" },
  { number: 8, title: "천혜향" },
  { number: 9, title: "과일선물세트" },
  { number: 10, title: "귤" },
];

export default function MapFruitsPage() {
  // const aaa = [
  //   <div>1 레드향</div>,
  //   <div>2 샤인머스캣</div>,
  //   <div>3 산청딸기</div>,
  // ];

  // const bbb = ["나의레드향", "나의샤인머스캣", "나의산청딸기"].map((el)=>(<div>el</div>))

  // let ccc = FRUITS.map((el)=>(<div>{el.number} {el.title}</div>))

  return (
    <div>
      {FRUITS.map((el) => (
        <div>
          {el.number} {el.title}
        </div>
      ))}
    </div>
  );

通常html部分を挿入する形で使用されます.

掲示板のリストを受け取ると、

を使用します.

  return (

      <div>
        {data?.fetchBoards.map((el, index) => (
          <Row key={el.Number}>
            {/* 키는 인덱스 안됨 완전 고유한 것 맨 위 부모 div대신 Fragment T쓰면 key 쓸 수 있다.*/}
            <Column>
              <input type="checkbox" />
            </Column>
            <Column>{el.number}</Column>
            <Column> {el.writer}</Column>
            <Column>{el.title}</Column>
            <Column>{index}</Column>

            {/* index는 map이 실행시켜준 순서 */}
            <button id={el.number} onClick={onClickDelete}>삭제</button>
            {/* <div>내용 : {el.contents}</div> */}
          </Row>
        ))}
      </div>

  );

filter

「≪配列｜Array｜Essbase_Studio≫」で、条件が満たされている場合は、配列を保持するか、削除します.
オリジナルの個数以下.
filterやmapと一緒に使えます!