컴포넌트 반복

웹 어플리케이션을 만들때 반복되는 코드를 작성할 때가 있습니다.

 

import React from 'react';

const ArrayText = () => {
  const dataArray = ['hi', 'hello', 'hello world!'];

  return (
    <ul>
      <li>{dataArray[0]}</li>
      <li>{dataArray[1]}</li>
      <li>{dataArray[2]}</li>
    </ul>
  );
};

export default ArrayText;

위의 코드에서 <li> ... </li> 코드가 반복되는것을 확인할수 있습니다.

보여주어야 할 데이터가 적을경우에는 상관 없지만, 보여주어야 할 데이터가 유동적이라면 위와 같은 코드로는 관리할수 없습니다.

 

리액트에서는 반복되는 컴포넌트를 다루기 위해 자바스크립트 배열의 map() 함수를 사용합니다.

 

map 함수의 파라미터는 다음과 같습니다.

 

arr.map(callback, [thisArg])

 - callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 입니다.

    - currentValue : 현재 처리하고 있는 요소

    - index : 현재 처리하고 있는 요소의 index 값

    - array : 현재 처리하고 있는 원본 배열

 - thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스

 

리액트에서 사용하는 map() 함수가 HTML에서 반복되는 요소를 만드는것과 다른점은 key 속성을 사용한다는 점입니다.

 

map의 함수는 배열의 요소를 반복할때 key를 사용할수 있습니다.

 

리액트에서 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.

key가 없을 경우 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다. 하지만 key가 있다면 이러한 변화를 더 빠르게 감지할수 있습니다.

key 값은 언제나 유일해야 하며, 데이터가 가진 고윳값을 key 값으로 사용해야 합니다.

 

import React from 'react';

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

export default IterationSample;

위의 코드가 map과 key값을 같이 사용한 예시이며, 위의 코드에서 주의해야할점은 고유한 값이 없을 때만 index 값을 key로 사용해야 한다는 점 입니다.