[React] map 메소드 적용/ 오류 해결

map 메소드로 다음과 같이 작성하면

import logo from "./logo.svg";
import "./App.css";

const App = () => {
  const users = [
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" },
  ];

  return (
    <div className="style">
      <ul>
        {users.map((v) => {
          return (
            <li className="squareStyle">
              {v.name}-{v.age}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

css 가 적용된 상태의 이름과 나이값을 담은 li 태그가 생성된다.

 

그러나 다음과 같은 오류가 발생하는데, 

map 함수를 쓸 때, 반복적으로 return 하는 부분에서는  유니크한 Key, 즉 고유의 id 값과 같은 것을 적용시켜야 한다.

        {users.map((v) => {
          return (
            <li key={v.id} className="squareStyle">
              {v.name}-{v.age}
            </li>
          );
        })}

이와 같이 코드를 수정하면 오류는 발생하지 않는다.