[React] 배열 렌더링(Array Rendering)

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"},
];

animals 배열을 react에서 rendering하는 3가지 방법을 정리해봤다.

방법1: 그대로 작성

말그대로 배열의 요소들을 Animal component에 하나하나 다 작성해서 rendering하는 방법이다.

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: 새로운 Component 이용

새로운 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을 사용하는 방법이다.
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"));

이렇게 작성해도 아래와같이 rendering은 된다.

하지만 Error: Each child in a list should have a unique "key" prop.가 발생한다.

왜냐하면 map 함수에 key값을 지정해주지 않았기 때문이다.
react에서 배열을 rendering 할 때에는 key 라는 props 를 설정해야 한다. 또 key 값은 각 원소들의 고유값(id)으로 설정을 해야한다.

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

만약 고유값(id)이 없다면 마지막 방법으로 각 요소의 index를 사용할 수 있다

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

참고

Key [React 공식사이트]
11. 배열 렌더링하기 [벨로퍼트와 함께하는 모던 리액트]
map [MDN]