[React] html태그 반복 (map)

---

map 함수를 활용하면 코드 양을 줄일 수 있고 편하다. 혹시 아직 map 함수에 대해 잘 모른다면 여기를 참고하자!

html태그 반복 렌더링

function App() {
  const array = ["손명오", "최혜정", "문동은", "박연진", "이사라", "하도영"];
  return (
    <div className="container">
      <ul>
        {array.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

위 코드를 App.js에 작성 했다면 아래 이미지 처럼 출력될 것 이다.

이 처럼 map함수를 쓴다면 훨씬! 길어질 코드가 엄청 간결해진다.

---

Error 발생!!!

하지만 F12를 누르고 개발자도구 모드에서 console 쪽을 본다면 다음과 같은 에러 하나가 발생한 것을 볼 수 있다.

---

Error 해결과 이유

function App() {
  const array = ["손명오", "최혜정", "문동은", "박연진", "이사라", "하도영"];
  return (
    <div className="container">
      <ul>
        {array.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

위 코드에 “<li key={name}>”이 부분을 추가하면 더 이상 에러는 발생하지 않는다

1. 공식문서에 의하면, Key는

1. key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다

2. key는 element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야한다.

2. key 값이 중복되는게 있다면

function App() {
  const array = ["손명오", "최혜정", "문동은", "박연진", "이사라", "하도영", "하도영"];
  return (
    <div className="container">
      <ul>
        {array.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

위 코드처럼 배열 array 안에 하도영이 2명이으므로 key값 중복 에러가 일어나게 된다. 이름을 개명할 수도 없고…..
아래 코드처럼 index를 활용하여 key값 중복 에러를 해결할 수 있다

{array.map((name,index) => (
    <li key={index}>{name}</li>
))}

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.