이번 편에서는 반복 컴포넌트multiple components 작성하는 방법을 알아보겠습니다.

기본 형태

import React from 'react'

const Animals = () => {
  const animalList = ['dog', 'cat', 'tiger']

  return (
    <ol>
      <li>
        <span>{animalList[0]}</span>
      </li>
      <li>
        <span>{animalList[1]}</span>
      </li>
      <li>
        <span>{animalList[2]}</span>
      </li>
    </ol>
  )
}

동물의 이름을 순차적으로 보여주는 컴포넌트입니다.

이 예시처럼 배열의 길이가 작고 항상 고정적이라면 이렇게 작성하는 것도 괜찮겠지만, 배열의 길이가 크거나 비고정적이라면 이렇게 작성하는 것으로는 분명히 한계가 있습니다.

반복적으로 나타나는 부분은 li 태그이니 이 부분을 배열의 map 메서드를 이용하면 유연하게 작성을 하면 좋을듯 합니다.

import React from 'react'

const Animals = () => {
  const animalList = ['dog', 'cat', 'tiger']

  return (
    <ol>
      {animalList.map((animal, index) => (
        <li key={index}>
          <span>{animal}</span>
        </li>
      ))}
    </ol>
  )
}

배열의 길이에 상관 없이 반복 컴포넌트로 바뀌었습니다.

그러고 보니 li 태그에 key 속성이 있는데, React에서 배열의 map 메서드를 이용해 반복 컴포넌트를 작성하는 경우 필수적으로 추가해줘야 하는 특별한 속성입니다.

import React from 'react'

const Animal = ({ name }) => (
  <li>
    <span>{name}</span>
  </li>
)

const Animals = () => {
  const animalList = ['dog', 'cat', 'tiger']

  return (
    <ol>
      {animalList.map((animal, index) => (
        <Animal key={index} name={animal} />
      ))}
    </ol>
  )
}

커스텀 컴포넌트를 사용할 때에도 작성을 해줘야 하며, 내부가 아니라 외부에 작성을 해줘야 합니다.

key가 필요한 이유

0-0. 개요#간단한_원리에서 소개했듯이 React는 상태가 바뀌면 바뀐 부분만 새로 그리는데, 반복 컴포넌트인 경우는 key 속성에 지정한 값을 기준으로 기존의 컴포넌트인지 판단합니다.

• 즉, 이전의 key 값과 새로운 key 값이 같으면 기존의 컴포넌트이니 새로 그리지 않습니다.

따라서, 배열 안에서 key 값은 중복이 없는 유일한 값이어야 합니다

• 중복이 있으면 이전에 그린 것인지 새로 그려야 하는 것인지 알 수 없기 때문입니다.

또한, 문자열string 혹은 숫자number만 지정할 수 있으며, 그 이외에 진리값boolean, 배열array, 오브젝트object 등 값을 지정할 경우 DevTools의 console 창에 경고메시지가 발생합니다.

팁으로, 배열의 map 메서드는 2번째 파라미터가 배열의 순서에 해당하는 숫자값이니 가장 무난하게 사용할 수 있습니다.

• key는 최적화와 관련이 있으므로, React에 익숙한 분이라면 이번 편에서 소개하는 내용 보다 더 자세하게 설명한 포스트를 통해 더 깊이 이해하는 것을 권장합니다.