[React] 컴포넌트 반복하기

우선 반복을 하기전에 자바스크립트의 Array.map()함수에 대해 알고 넘어가야합니다. map()함수는 배열의 요소들을 인자로 가진 함수로 가공해서 배열의 형태로 반환하는 함수입니다. 이 함수를 꼭 기억해주세요.

const animals = ['야옹', '멍', '짹', '삐약'];
const repeat = animals.map(animal => animal.repeat(2));

console.log(repeat);

---

1. 배열을 컴포넌트 배열로 만들기

우선 간단하게 배열을 이용해서 컴포넌트 배열로 만들어서 반환하는 방법을 소개해드리겠습니다. 컴포넌트를 하나 만들어줍니다. 이때 map()함수는 animals배열의 요소들을 JSX형태로 변환해주는 역할을 합니다. 

import React from 'react';

const AnimalFriends = () => {
    const animals = ['야옹', '멍', '짹', '삐약'];
    const animalList = animals.map(animal => <li>{animal}</li>);

    return <ul>{animalList}</ul>;
}

export default AnimalFriends;

그런데 "key"가 없다면서 경고를 냅다 띄웁니다.

 

 

 

2. key

key라는 건 리액트에서 컴포넌트 배열에서 변화를 식별하기 위해 이용합니다. 물론 없어도 실행이 잘된거처럼 Virtual DOM과 실제 DOM을 비교했기 때문에 실행은 잘 되었습니다. 하지만 key를 이용해서 변화를 미리 감지한다면 더 빠른 동작을 보일 수 있겠죠. 그럼 이제 key가 뭔지 알았으니 key를 지정해보겠습니다.

key의 지정방법은 map에서 컴포넌트 값으로 전달해줍니다. 마치 컴포넌트에 props를 설정하는 것처럼요. key값의 특징은 언제나 고유 값을 가져야 한다는 것입니다. 그래서 대부분의 경우에 각 요소가 가지고 있는 id를 key로 지정해서 사용합니다.

//이 코드는 key에러가 여전히 납니다.
//이유는 후술
import React from 'react';

const AnimalFriends = () => {
    const animals = ['야옹', '멍', '짹', '삐약'];
    const animalList = animals.map(animal => <li key={animal.id}>{animal}</li>);

    return <ul>{animalList}</ul>;
}

export default AnimalFriends;

 

우리는 위에서 만든 예제로 id값을 주지 않았습니다. 그야 당연히 평범한 배열이니까요. id값을 주고 싶다면 위의 배열을 객체 배열로 만들면 됩니다.

const animals = [
  {id: 01, say: '야옹'},
  {id: 02, say: '멍'},
  {id: 03, say: '짹'},
  {id: 04, say: '삐약'},
];

 

또는 권장되는 방식은 아니지만 요소의 index를 key로 사용하는 방식도 있습니다.

import React from 'react';

const AnimalFriends = () => {
    const animals = ['야옹', '멍', '짹', '삐약'];
    const animalList = animals.map((animal, index) =>
      <li key={index}>{animal}</li>
    );

    return <ul>{animalList}</ul>;
}

export default AnimalFriends;

---

참조

https://ko.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React