Map 함수

기본적인 형태 : Array.map(callback(currentValue[, index[, array]])

매개변수

callback : 새로운 배열 요소를 생성하는 함수, 아래의 세가지 인수를 가질 수 있다.

• currentValue : 처리해야하는 현재 요소
• index : 처리해야하는 현재 요소의 인덱스(optional)
• array : map()을 호출한 배열

실행결과로 반환이 되는 값

배열의 각 요소를 실행한 callback의 결과를 모은 새로운 배열

Key

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

위의 코드를 해석하면 map함수가 number를 li태그로 넣는 시행을 numbers 배열의 길이만큼 실행하고 그 li태그들을 하나의 ul태그에 감싸는 역할을 하는 프로그램이란 것을 알 수 있다. 하지만, 위의 코드를 실행하면, 리스트 각 항목에 key값을 주어야 한다는 경고와 함께 결과가 페이지에 렌더링된다.

So, Key가 뭐냐고 묻는다면, React가 항목을 변경, 추가, 삭제를 할 때 식별하는 것을 돕는 기능이다. 즉, 각 element에 고유한 id를 부여하는것과 같은 것을 의미한다.

위의 코드를 다시 key값 부여한채로 수정하면, 아래와 같은 코드가 된다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number, index) =>
    <li key={index}>
    {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Map함수를 돌리는 주체가 배열이므로 각각의 element에 대한 index값 만큼 고유한 값은 없다. 하지만, 중간에 element하나가 삭제되면 이미 부여된 key값과 해당 배열의 index값이 달라지는 현상이 발생한다. 그러기애 index역시 key값으로 사용하기 부적절하다. 그래서 대부분의 경우 데이터의 id값을 key로 사용한다. Id값이 없는 경우(ex. 숫자), data type을 string으로 바꿔주는 toString()함수를 사용하기도한다.

Key를 사용하는 정석적인 방법

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
    {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Key를 사용한 예시(SNS상에서 댓글을 화면에 띄우는 기능)

function Comment(comment) {
  let commentArray = comment.comment;
  return commentArray.map((props) => {
    return (
      <div key={props.id}>
        <span className="userid">{props.userid}</span> 
        {props.comment}
      </div>
    );
  });
}