TIL16. React Map

김정현·2020년 10월 10일
0

Map()

map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후
그 결과로 새로운 배열을 생성 한다.

문법

arr.map(callback, [thisArg])

  • callback 새로운 배열의 요소를 생성하는 함수

    callback의 파라미터 3가지
    1.currentValue 현재 처리하고 있는 요소
    2.index 현재 처리하고 있는 요소의 index 값
    3.array 현재 처리하고 있는 원본 배열
  • thisArg(선택 항목) callback 함수 내부에서 사용할 this 레퍼런스

예제

map 함수를 사용하여 배열 [1, 2, 3, 4, 5]의 각 요소를 제곱해서 새로운 배열을 생성텍스트

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => num * num);
console.log(result);

데이터 배열을 컴포넌트 배열로 변환하기

map함수는 기존 배열로 컴포넌트로 구성된 배열을 생성할 수 있다.

import React from 'react';
 
const test = () => {
  const names = ['봄', '여름', '가을', '겨울'];
  const nameList = names.**map(name => <li>{name}</li>);**
  return <ul>{nameList}</ul>;
};
 
export default test;

Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

const articleList = articles.map(article => (
  <Article
      title={article.title}
      writer={article.writer}
      **key={article.id}**
  />
);

만약 위의 예제처럼 데이터가 갖는 고유 번호(유저아이디 등..)가 없을 때에는 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하면 된다.

단 고유한 값이 없을 때만 index 값을 key로 사용해야 하며 index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못한다.

0개의 댓글