🧑‍💻 React study 6.

Chapter 6.

リピート構成部品

6.1 JavaScript配列のmap()関数

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

arr.map(callback, [thisArg])

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

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

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

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

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

6.2データ配列を構成部品配列に変換する

6.2.1構成部品の作成

import React from 'react';

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

export default IterationSample;

// 생성한 컴포넌트 렌더링 하기
import { Component } from 'react';
import IterationSample from './IterationSample';

class App extends Component {
  render() {
    return <IterationSample />;
  }
}

export default App;

6.3 key

応答では、keyは、シンボルアレイをレンダリングするときにどの要素が変化したかを決定するために使用されます.
keyがない場合,仮想DOMを比較する過程でリストを順次比較し変化を検出する.
6.3.1鍵の設定
キー値を設定する場合は、map関数パラメータに渡される関数内部設定素子propsのように設定できます.
key値は常に一意でなければなりません.

// 예제
const articleList = articles.map(article => (
  <Atricle 
  	title={article.title}
    	writer={article.writer}
	key={article.id}
   />
));

6.4応用

整理する。

1) 컴포넌트 배열을 렌더링 할대는 key값을 설정해 줘야 한다.

2) key값은 언제나 유일한 값이어야 한다.

3) 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 배열 내장 함수를 사용해야 한다.