※ 공식문서를 읽고 정리한 글입니다.

List의 변환 - map()

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); //[2, 4, 6, 8, 10]

• map()함수를 이용해 배열이나 리스트를 원하는대로 변환할 수 있음

map()을 사용한 여러개의 컴포넌트 렌더링

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

• 마찬가지로 map()함수를 사용해 컴포넌트를 여러개 렌더링할 수 있음
  다만 코드를 실행하게 되면 key를 포함해야 한다는 경고가 나옴

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

• 리스트 엘리먼트를 만들때에는 key 속성을 반드시 포함해야함

Key

• Key는 리액트가 어떤항목을 변경, 추가, 삭제할지 식별하는 것을 돕는 속성
• Key는 배열 내부의 엘리먼트에 저장되어야 함

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);
                            
const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

• 일반적으로 데이터의 id를 key로 사용하지만, stable한 id가 없다면 인덱스를 key로 사용해야함
  key를 지정하지 않은 경우 리액트는 index를 key로 사용함
• key를 인덱스로 사용하는 경우 성능저하나 state관련 문제가 생길 수 있음
• key는 map을 사용하는 배열 안에서는 고유한 값을 가져야 함
• key는 prop으로 읽어올 수 없는 값임에 주의! (key값을 읽어와야할경우 같은 값을 가지는 prop속성의 추가 필요)

JSX의 활용

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

• jsx 내부에 map함수를 처리하면 변수나 함수선언없이 리스트 반환 가능
• 가독성 문제가 생길수 있기 때문에 상황에 맞게 사용해야함

출처:
https://ko.reactjs.org/docs/lists-and-keys.html