import React from "react";

const IterationSample = () => {
  return (
    <ul>
      <li>눈사람</li>
      <li>얼음</li>
      <li>눈</li>
      <li>바람</li>
    </ul>
  );
};

export default IterationSample;

<li>ラベル重複.→重複するコンテンツを効率的に表示および管理する方法を学習します.

JavaScript配列のmap()関数

JavaScript配列オブジェクトの組み込み関数map関数を使用して、重複する構成部品をレンダリングできます.map関数は、パラメータに渡された関数を使用して、アレイ内の各要素を必要なルールに従って変換し、新しいアレイを生成します.

1.構文

arr.map(callback, [thisArg])

callback:新しい配列要素を生成する関数で、パラメータは以下の3種類あります.

現在価値:現在処理の要素

index:現在処理中の要素のindex値

array:現在処理中のソースアレイ

thisArg(オプション):callback関数で使用するこの例

2.例

var processed = numbers.map(function(num){return num*num;});

Arrow Functionと表示されます.

var processed = numbers.map(num => num * num);

データ・アレイから構成部品アレイへの変換

1.構成部品の変更

import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"]; 
  const nameList = names.map((name) => <li>{name}</li>); // DOM 요소
  return <ul>{nameList}</ul>;
};

export default IterationSample;

map関数でJSXを作成する場合、DOM要素とコンポーネントが使用できます.

const nameList = names.map((article) => 
	// 컴포넌트
    <Article
        title = {article.title}
        writer = {article.writer}
        key = {article.id}
    /> 
);

「key」propがないという警告メッセージが表示されます.

Key

反応器では、keyは、エレメントアレイをレンダリングするときにどのエレメントが変化したかをユーザに理解させる.たとえば、フローデータを処理するときに、要素を新規、削除、または変更できます.
key値がない場合、仮想DOMを比較する過程で、リストを順次比較し、変化を検出します.keyがある場合は、この値を使用して、どのような変化が発生したかをより正確に知ることができます.

1.鍵の設定

キー値を設定すると、map関数パラメータに渡される関数内部に素子propsを設定するようになります.key値は常に一意でなければなりません.そこで、データの高いYut値をキー値に設定します.

import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

ユニークな値がない場合にのみ、キーとしてインデックス値を使用します.キーとしてindexを使用すると、配列が変更されたときに効果的にレンダリングできません.

適用

ダイナミックレイアウトをレンダリング!

動的データの表示
初期状態の設定→データ追加機能の実施→データ削除機能の実施

1.初期状態の設定

使用useState状態設定3つの状態を使用して、

データ配列

入力可能テキストのinput状態

データアレイに新規アイテムの一意IDを追加するための状態

上記の例では、文字列のみからなる配列を作成しましたが、今回はオブジェクト形式で構成された配列を作成しました!

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); // 새로운 항목을 추가할 때 사용할 id

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

export default IterationSample;

2.データ付加機能の実施

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); // 새로운 항목을 추가할 때 사용할 id

  const onChange = (e) => setInputText(e.target.value);
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId, // nextId 값을 id로 설정
      text: inputText,
    });
    setNextId(nextId + 1); // nextId 값에 1을 더해 준다.
    setNames(nextNames); // names 값을 업데이트한다.
    setInputText(""); // inputText를 비운다.
  };

  const nameList = names.map((name) => <li key={name.id}>{name.text}</li>);
  return (
    <>
      <input value={inputText} onChange={onChange}></input>
      <button onClick={onClick}>추가</button>
      <ul>{nameList}</ul>;
    </>
  );
};

export default IterationSample;

onClick関数配列の組み込み関数concatを使用して新規項目を追加する配列を作成し、setNameでステータスを更新します.

pushを使用せずにconcatを使用するのは、push関数が既存の配列自体を変更し、concatが新しい配列を作成するためである.反応器で状態を更新する場合は、元の状態を維持し、新しい値を状態に設定します.→不変性保持

不変性を維持してから反応素子の性能を最適化する.

onClick関数に新しいアイテムを追加する場合、オブジェクトのid値はnextIdを使用し、クリックするたびに値を1に上げるようにします.

ボタンクリック時に既存の入力内容をクリアしたこともこれを反映している.

3.データ削除機能の実施

各アイテムをダブルクリックすると、そのアイテムが画面から消える機能を実現します.
不変性を維持しながら更新し、不変性を維持しながらアレイ内の特定の項目を削除する場合は、アレイの組み込み関数フィルタを使用します.
filter関数を使用すると、配列内で特定の条件を満たす要素だけが分類されやすくなります.

const numbers = [1, 2, 3, 4, 5, 6];
const biggerThanThree = numbers.filter( number => number > 3);

結果が出た[4, 5, 6]

const numbers = [1, 2, 3, 4, 5, 6];
const biggerThanThree = numbers.filter( number => number != 3;

結果が出た[1, 2, 4, 5, 6]

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); // 새로운 항목을 추가할 때 사용할 id

  const onChange = (e) => setInputText(e.target.value);
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText("");
  };
  const onRemove = (id) => {
    const nextNames = names.filter((name) => name.id != 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}></input>
      <button onClick={onClick}>추가</button>
      <ul>{nameList}</ul>;
    </>
  );
};

export default IterationSample;

整理する

シンボル配列をレンダリングするときは、キー値の設定に常に注意してください.また、key値は常に一意である必要があります.キーの値が繰り返されると、レンダリング中にエラーが発生します.
ステータスでアレイを変形する場合は、アレイに直接アクセスして変更するのではなく、concat、filterなどのアレイ内蔵関数を使用して新しいアレイを作成し、新しい状態に設定します.