[React] map 함수 사용하기

React에서 map 함수 사용하기

React에서 반복되는 요소들을 렌더링할 때는 주로 JavaScript의 map() 함수를 사용합니다. 

이 함수는 배열의 각 요소를 순회하면서 새로운 배열을 만들어주는데, React에서는 이를 활용해 컴포넌트를 반복적으로 생성할 수 있어요.

---

기본 사용법

function App() {
  const names = ["갓대희", "김대희", "한대희"];
  
  return (
    <div>
      {names.map((name) => (
        <div>{name}</div>
      ))}
    </div>
  );
}

 

이렇게 하면 names 배열의 각 이름마다 <div> 요소가 생성됩니다 .

---

key 속성 추가하기

---

React에서 map으로 요소를 반복 생성할 때는 반드시 key 속성을 추가해야 합니다. 

이는 React가 어떤 항목이 변경, 추가 또는 삭제되었는지 식별하는 데 도움을 줍니다.

function App() {
  const names = ["갓대희", "김대희", "한대희"];
  
  return (
    <div>
      {names.map((name, index) => (
        <div key={index}>{name}</div>
      ))}
    </div>
  );
}

---

주의사항

JSX 안에서는 for 반복문을 직접 사용할 수 없습니다. 대신 map() 함수를 사용해야 합니다 .
forEach 메서드는 값을 반환하지 않기 때문에 JSX 내에서 사용할 수 없습니다 .
항상 key 속성을 제공해야 하며, 가능하면 배열 인덱스보다는 고유한 ID를 사용하는 것이 좋습니다.