React 08. map

사용법

1. JavaScript

• 배열을 순회하며, 배열의 각 항목에 대해 특정 함수를 실행한 후, 그 결과로 새로운 배열을 생성

const a = [1, 2, 3, 4];
const b = a.map(item => item*2);

console.log(b)	 // [2, 4, 6, 8]

2. React

• 컴포넌트를 순회하고 렌더링하는데 사용

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

// 출력
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>

---

주의할 점

1. 화살표 함수의 중괄호, 소괄호

• JavaScript에서 화살표 함수를 사용할 때 중괄호를 사용하면 함수 본문을 의미, 이 경우 반환 값이 있을 때는 return 키워드를 사용해야 함

• 반면에 소괄호를 사용하면 표현식을 의미하며, 표현식의 결과 값이 자동으로 반환되므로, JSX 문법에서는 return 을 생략하기 위해 소괄호를 많이 사용
  
  

2. 값 반환

• map 함수는 항상 값을 반환하야 한다. 만약 조건부 렌더링을 사용하고 특정 조건에서 아무것도 렌더링하지 않으려면 null을 반환하야 함

numbers.map(number => {
	if (number > 2) {
    	return <li>{number}</li>
    } else {
    	return null;
    }
});

3. key

• React에서 리스트를 렌더링할 때, 각 항목에 고유한 key prop을 부여해야 함
• key는 React가 어떤 항목을 변경, 추가 또는 삭제해야 하는지를 파악하는데 도움을 줌
• 안정적이고 고유한 값을 가져야 함
• 객체 형태로 고유의 값을 설정해 놓는 것이 좋음

const todoList = [
  {id: '1', text: 'todo1'},
  {id: '2', text: 'todo2'},
  {id: '3', text: 'todo3'},
];

return (
  <ul>
      {todoList.map(todo => (
          <li key={todo.id}>{todo.text}</li>
      ))}
  </ul>
);

---

Key의 중요성

1. index 등과 같은 안정적이지 않은 값을 넣을 경우

• React에서 리스트를 렌더링할 때, key 속성에 배열의 인덱스를 할당하는 것은 간단하지만 리스트가 동적으로 변경될 경우 문제를 일으킬 수 있음

• 리스트에 새로운 항목이 추가되거나 삭제되면 기존 항목의 인덱스가 변하게 되어, React는 모든 항목을 새로운 것으로 인식해 불필요한 리렌더링을 일으키게 됨

• 정적인 리스트에서만 인덱스를 key 로 사용해야 함

2. 고유하지 않은 중복된 값을 넣을 경우

• 중복된 key 를 사용하면, React는 그것들이 같은 요소라고 생각할 수 있어 요소에 대한 변경이 다른 요소에도 적용될 수 있으며 렌더링 오류를 일으킬 수 있고 애플리케이션의 동작에 문제를 일으킬 수 있음

• 개발자 도구 콘솔에 경고메시지가 표시되며, 개발 과정에서 불필요한 혼란을 일으킬 수 있음