.map() 메서드

• 자바스크립트 배열 메서드인.map() 함수는 React에서도 코드를 효율적으로 구성하는 데 유용하게 사용할 수 있다.
• 반복되는 컴포넌트를 렌더링하기 위해 자바스크립트의 내장 함수인 map()을 사용한다.
• map() 함수는 파라미터로 전달된 함수를 사용해, 배열 각 요소를 원하는 규칙에 따라 변환한 다음 새로운 배열을 생성한다.
  참조: https://velog.io/@kykim_dev/JavaScript-15-Basic-of-JavaScript-Array-methods

const strings = ['Home', 'shop', 'About Me']

const listItems = strings.map(string => <li>{string}</li>);
                 
<ul>{listItems}</ul>         

• strings 배열에서 .map()을 호출하면, 새로운 <li> 배열을 생성한다.
• <ul><ul/>안에는 .map()에서 호출된 <li></li>목록이 담긴다.

Keys

• JSX 안에서 리스트를 생성할 때, 키(key)가 필요하다.
• key는 JSX 속성으로 HTML의 id 속성처럼 이 속성 값은 특정값으로 쓰인다.
• key는 렌더링 시 컴포넌트 배열에 어떤 변화가 일어났는지 더욱 빠르게 알아내기 위해 사용한다.
• key는 화면상으로 보이는 변화는 없다. React는 내부적으로 리스트의 순서를 찾는데, key가 없다면 React가 list의 아이템들의 순서를 제대로 찾지 못할 수 있는 것이다.
• 모든 리스트에 key가 필요한 것은 아니다. key가 필요한 조건은 다음과 같다.
  1) 리스트 아이템이 다음 순서로 렌더링 될 때 그 절차가 기록되어야 할 때. (투 두 리스트에서 완료된 항목은 저장되어야 한다)
  2) 리스트의 순서가 섞일 수 있을 때. (검색 기록은 다음 렌더링에서 섞일 수 있다)

import React from 'react';
import ReactDOM from 'react-dom';

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map((person, i) =>  <li key={'person_' + i}>{person}</li>);

ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'));

Key 설정하기

• map() 함수 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하는 것과 같다. 단, key 값은 유일한 값이어야 한다.