웹 애플리케이션을 만들다 보면 반복되는 코드를 작성할 때가 있습니다. 같은 형태의 코드를 반복해서 쓴다면 효율적이지 못할 것입니다. 그럴 때 사용하는 것이 바로 자바스크립트 배열 객체의 내장 함수인 map함수입니다.

🗺 map 함수

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

📑 문법

arr.map(callback, [thisArg])

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

• callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지입니다.
  • currentValue: 현재 처리하고 있는 요소
  • index: 현재 처리하고 있는 요소의 index 값
  • array: 현재 처리하고 있는 원본 배열
• thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스

📚 예제

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

console.log(result);
=> [1, 4, 9, 16, 25]

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

문자열로 구성된 배열을 선언합니다. 그 배열 값을 사용하여 <li>...</li> JSX 코드로 된 배열을 새로 생성한 후  
nameList에 담습니다. 하지만 위 예제를 실행하고 콘솔 창을 열어보면 "key" prop이 없다는 경고 메시지를 표시합니다.
key는 무엇일까요?

🔑 Key

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다. 예를 들어 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있습니다.

key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있습니다.

key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 됩니다. key 값은 언제나 유일해야 합니다. 따라서 데이터가 가진 고유값을 key 값으로 설정해야 합니다.

const articleList = articles.map(article => {
  <Article
    	title={article.title}
  	writer={article.writer}
  	key={article.id} // 게시물 번호
  />
);

아까 콘솔에서 경고 메시지를 받았던 예제를 수정해보겠습니다.

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

이렇게 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하면 됩니다. 위의 예제에서 map((name, index) => ...) 의 모양으로 함수를 사용하였는데 index는 map 함수의 기본 파라미터인 index일 것이고 name은 현재 처리하고 있는 값을 나타내는 파라미터인 currentValue일 것입니다.

이 때, 고유한 값이 없을 때만 index 값을 key로 사용해야 합니다. index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못합니다. 그렇다면 고유값을 만들 수도 있을까요?

😃 응용

위에서 예제로 사용하였던 IterationSample 컴포넌트를 계속 사용하겠습니다. 배열을 설정할 때, 조금 전에는 단순히 문자열로 이루어진 배열을 만들었지만, 이번에는 객체 형태로 이루어진 배열을 만들겠습니다. 해당 객체에는 문자열과 고유 id 값이 있습니다.

import React, { useState } from 'react';

const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '눈사람' },
    { id: 2, text: '얼음' },
    { id: 3, text: '눈' },
    { id: 4, text: '바람' }
  ]);
  const [inputText, setInputText] = useState('');
  const [nextId, setNextId] = useState(5); // 새로운 항목을 추가할 때 사용할 id
  
  const nameList = names.map(name => <li key={name.id}>{name.text}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

이번에는 map 함수를 사용할 때 key 값을 index 대신 name.id 값으로 지정해 주었습니다.

작성중...