[React]アレイレンダリング

const animals = [
  { id: 0, name: "Lion", type: "predator"},
  { id: 1, name: "Tiger", type: "predator"},
  { id: 2, name: "Rabbits", type: "herbivore"},
  { id: 3, name: "Hyena", type: "predator"},
  { id: 4, name: "Rhino", type: "herbivore"},
];

反応中に動物の配列を示す3つの方法を整理した.

方法1:そのまま作成

名前の通り、Animalコンポーネントで配列内の要素を1つずつ作成してレンダリングする方法です.

import React from "react";
import ReactDOM from "react-dom"

const animals = [
  { id: 0, name: "Lion", type: "predator"},
  { id: 1, name: "Tiger", type: "predator"},
  { id: 2, name: "Rabbits", type: "herbivore"},
  { id: 3, name: "Hyena", type: "predator"},
  { id: 4, name: "Rhino", type: "herbivore"},
];

const AnimalList = () => {
  return(
  	<ul>
      <li><h2>{animals[0].name} ({animals[0].type})</h2></li>,
	  <li><h2>{animals[1].name} ({animals[1].type})</h2></li>,
	  <li><h2>{animals[2].name} ({animals[2].type})</h2></li>,
      <li><h2>{animals[3].name} ({animals[3].type})</h2></li>,
	  <li><h2>{animals[4].name} ({animals[4].type})</h2></li>,
    </ul>
  )
}

ReactDOM.render(<AnimalList />, document.getElementById("root"));

方法2:新しいコンポーネントを使用する

新しいProfile componentを作成し、Animal component内部で使用できます.componentを使用すると、重複するコードを減らすことができ、componentを再利用することもできます.

import React from "react";
import ReactDOM from "react-dom"

const animals = [
  { id: 0, name: "Lion", type: "육식"},
  { id: 1, name: "Tiger", type: "육식"},
  { id: 2, name: "Rabbits", type: "초식"},
  { id: 3, name: "Hyena", type: "육식"},
  { id: 4, name: "Rhino", type: "초식"},
];
// 새로운 Profile component
const Profile = ({ animal }) => {
  return (
    <div className={animal.id}>
      <h2>{animal.name} ({animal.type})</h2>
    </div>
  );
};

const AnimalList = () => {
  return (
    <ul>
      <li><Profile animal={animals[0]}/></li>
      <li><Profile animal={animals[1]}/></li>
      <li><Profile animal={animals[2]}/></li>
      <li><Profile animal={animals[3]}/></li>
      <li><Profile animal={animals[4]}/></li>
    </ul>
  )
}

ReactDOM.render(<AnimalList />, document.getElementById("root"));

方法3:Mapを使う

JavaScript Array.prototype.map()
JavaScript配列のデフォルトメソッドを使用してマッピングする方法.
mapメソッドは、所与の関数を呼び出した結果を配列内の各要素に集約し、新しい配列を作成します.

import React from "react";
import ReactDOM from "react-dom"

const animals = [
  { id: 0, name: "Lion", type: "육식"},
  { id: 1, name: "Tiger", type: "육식"},
  { id: 2, name: "Rabbits", type: "초식"},
  { id: 3, name: "Hyena", type: "육식"},
  { id: 4, name: "Rhino", type: "초식"},
];

const Profile = ({ animal }) => {
  return (
    <div className={{animal.id}}>
      <h2>{animal.name} ({animal.type})</h2>
    </div>
  );
};
// 배열 메소드 map 이용
const AnimalList = () => {
  return (
    <ul>
      {animals.map((animal) =>
        <li><Profile animal={animal}/></li>
      )}
    </ul>
  )
}

ReactDOM.render(<AnimalList />, document.getElementById("root"));

このようにして、次のようにレンダリングすることもできます.

しかし、Error:Each child in a listには唯一の「key」propがあるはずです.発生する.
map関数にキー値が指定されていないためです.
reactで配列をレンダリングする場合はkeyというpropsを設定する必要があります.また、キー値は、各要素の一意の値(id)に設定する必要があります.

{animals.map((animals) =>       //map함수 내부 li tag안에 key 입력
        <li key={animals.id}><Profile animals={animals} /></li>
      )}

固有値(id)がない場合は、最後の方法で各要素のインデックスを使用できます.

{animals.map((animals, index) =>
   // li tag안에 index 사용         
        <li key={index}><Profile animals={animals} /></li>
      )}

リファレンス

Key[React公式サイト]
11.レンダリング配列[ベロフォードとのモダン反応]
map [MDN]