1 분 소요

map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

문법

arr.map(callbackFunction(currentValue, index, array), thisArg);

  • callback 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

  • currentValue 처리할 현재 요소.

  • index 처리할 현재 요소의 인덱스.

  • array map()을 호출한 배열.

  • thisArg callback을 실행할 때 this로 사용되는 값.

예제

아래는 map()함수를 이용하여 movies 배열의 값을 map()에서 반환하는 새 배열을 renderMovies 변수에 할당하고 로그를 확인하는 코드입니다.

import React from "react";

function App() {
  const movies = [
    { title: "simson 1", yaer: 2001 },
    { title: "simson 2", yaer: 2002 },
    { title: "simson 3", yaer: 2003 },
  ];

  const renderMovies = movies.map((movie) => {
    return (
      <div>
        <div>{movie.title}</div>
        <div>{movie.yaer}</div>
      </div>
    );
  });
  return <div>{renderMovies}</div>;
}

export default App;

key

위의 예제를 실행시키면 잘 작동합니다. 하지만 f12를 눌러보면 에러가 있다는것을 알수있습니다.

react에서 key의 역활은 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. 그렇기 때문에 리스트 element에서 값을 업데이트를 위해서는 반드시 적어줘야 합니다. 이때 각각 element는 고유한 key를 갖고 있어야 합니다. 보통은 데이터의 id를 이용합니다.

예제

import React from "react";

function App() {
  const movies = [
    { id: 0, title: "simson 1", yaer: 2001 },
    { id: 1, title: "simson 2", yaer: 2002 },
    { id: 2, title: "simson 3", yaer: 2003 },
  ];

  const renderMovies = movies.map((movie) => {
    return (
      <div key={movie.id}>
        <div>{movie.title}</div>
        <div>{movie.yaer}</div>
      </div>
    );
  });
  return <div>{renderMovies}</div>;
}

export default App;

index를 key값으로 사용하지 않습니다.

주의 해야할점은 key값을 index로 주는것은 좋지 않습니다. 배열을 element화 시키기 위해 map을 사용할 경우, key값을 index로 사용하면 안되는 이유를 알 수 있습니다.

배열의 첫 번째 위치에 새로운 값을 넣었다고 예를 들어보겠습니다.

{id:3, title:"simson 4", year: 2004}

이 값을 배열의 맨 앞에 넣어다고 생각하면 될 것 같다. 그리고 나서 map을 돌릴 때, key를 단순히 index값을 주게 된다면 post.id는 무시된채 아래와 같은 상황이 될 것입니다.

key: 0,  { id: 3, title: "simson 4", yaer: 2004 },
key: 1,  { id: 0, title: "simson 1", yaer: 2001 },
key: 2,  { id: 1, title: "simson 2", yaer: 2002 },
key: 3,  { id: 2, title: "simson 3", yaer: 2003 },

결국 리액트가 판단했을 때, 기존의 key와 value 매칭 쌍이 싹다 바뀐것입니다. 기존에는 key:0인 것이 {id:0, title: ‘simson 1’ year: 2001} 였는데, 새로 들어온 요소가 key:0이 되고, 기존의 key:0은 key:1이 되었으니 결과적으로 배열 전체가 완전히 바뀐것이라고 판단 할 수 밖에 없습니다.

댓글남기기

참고

최대 1 분 소요