6.繰り返し構成部品

Webアプリケーションを作成する場合、重複するコードが作成されることがあります.(ulラベルのli)しかし、コードがもっと複雑であれば?コード量も増え、ファイルの容量も増えます.これは無駄です.また、表示するデータがフローしている場合は、これらのコードを管理できません.このような状況で効率的に表示および管理する方法について説明します.

6-1. JavaScript配列のmap()関数

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

👀map 문법?

arr.map(callback, [thisArg])

*callback : map함수의 파라미터는 세 가지 이다.
	- currentValue : 현재 처리하고 있는 요소
    - index : 현재 처리하고 있는 요소의 index 값
    - arry : 현재 처리하고 있는 원본 배열
*thisArg(선택 항목) : callback함수 내부에서 사용할 this 레퍼런스

6-2. データアレイから構成部品アレイへ

上記のmap構文を使用して、構成部品の繰返しサンプルコードを記述します.

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

export default InterationSample;

文字列からなる配列を宣言した後、その配列の値を使用して新しいJSXコード配列を作成し、namesListに入れます.map関数でJSXを作成する場合は、DOM要素を作成したり、コンポーネントを使用したりすることができます.
ただし、上記のコンポーネントを作成してAppコンポーネントでレンダリングすると、コンソールウィンドウに警告メッセージが表示されます.
Warning: Each child in a list should have a unique "key"prop.
この情報は「key」propのない警告情報である.

6-3. key

反応器では、keyは、エレメントアレイをレンダリングするときにどのエレメントが変化したかをユーザに理解させる.key値を使用すると、どのような変化が発生したかをより迅速に理解できます.

変更例

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

export default InterationSample;

開発者ツールに警告メッセージが表示されなくなりました.ユニークな値がない場合にのみ、キーとしてインデックス値を使用します.キーとしてindexを使用すると、配列が変更されたときに効果的にレンダリングできません.

6-4. 適用

固定されたアレイをレンダリングするのではなく、ダイナミックアレイのレンダリングを実現してみましょう.また、index値をキーとして使用すると、レンダリングが無効になります.では、高乳価格を作る方法も見てみましょう.

1-1. 初期状態の設定

useStateを使用してステータスを設定します.ステータスは、データ配列、入力テキストを許可する入力ステータス、およびデータ配列に新しいアイテムを追加するときに使用される一意のIDに使用されます.これで全部で3種類設定します.

import React, { useState } from 'react';

const InterationSample = () => {
  	const [names, setNames] = useState([
      { id: 1, text: '눈사람'},
      { id: 2, text: '얼음'},
      { id: 3, text: '눈'},
      { id: 4, text: '바람'}
    ]);
	const [inputText, setInputText] = useState('');
  	//새로운 항목을 추가할 때 사용할 id
  	const [nextId, setNextId] = useState(5);
  
  	const nameList = names.map(name => <li key={name.id}>{name.text}</li>);
    return <ul>{nameList}</ul>;
}

export default InterationSample;

key値にindexではなくnameを追加します.id値が指定されています.

1-2. データ追加/削除機能の実装

新しく作成したinputとbuttonを作成し、新しい名前を登録してデータを削除する機能を作成します.

import React, { useState } from 'react';

const InterationSample = () => {
  	const [names, setNames] = useState([
      { id: 1, text: '눈사람'},
      { id: 2, text: '얼음'},
      { id: 3, text: '눈'},
      { id: 4, text: '바람'}
    ]);
	const [inputText, setInputText] = useState('');
  	//새로운 항목을 추가할 때 사용할 id
  	const [nextId, setNextId] = useState(5);
  	
  	const onChange = e => setInputText(e.target.value);
  	const onClick = () => {
      	const nextNames = names.concat({
        	id: nextId,
          	text: inputText
        });
      	//nextID 값에 1을 더해준다
      	setNextId(nextId + 1);
     	// names 값을 업데이트 한다
      	setNames(nextNames);
      	//inputText값을 비운다.
      	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>{namesList}</ul>
      	</>
    )
    
}

export default InterationSample;

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