[React] Map key에 대해서

개발을 하다보면 아래 경고를 자주 마주하게 된다.

Key란?

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

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

key는 반드시 유니크해야한다.(꼭 1,2,3 순서일 필요가 없는듯)

단, 형재노드들 사이에서만 유니크하면 된다. 그리고 key는 수정되서는 안된다.

key의 이점

나중에 추가해도 상관없지만 삽입을 하거나 삭제할때 중요하게 작용한다고 한다.

key는 react가 무엇이 발생했는지 추론을 돕고 나아가 DOM Tree를 올바르게 만들어준다고 한다.

아래 예시를 통해 알아보자

//App.jsx
import react, { useState } from "react";
import Item from "./Item";
import "./styles.css";

export default function App() {
  const [lists, setLists] = useState([
    {
      id: 1,
      body: "리스트1"
    },
    {
      id: 2,
      body: "리스트2"
    },
    {
      id: 3,
      body: "리스트3"
    }
  ]);

  return (
    <div>
      <ul>
        {lists.map((list) => (
          <Item item={list} />
        ))}
      </ul>
    </div>
  );
}

// Item.jsx
import react from "react";

const Item = ({ item: { body }, item }) => {
  return <li>{body}</li>;
};
export default Item;

현재 키가 없어서 에러가 난다.

두가지 경우를 생각해보겠다

Map 함수쪽 key

return (
    <div>
      <ul>
        {lists.map((list) => (
          <Item item={list} key={list.id} />
        ))}
      </ul>
    </div>
  );

에러가 발생하지 않는다

Item 컴포넌트쪽 key

import react from "react";

const Item = ({ item: { body }, item }) => {
  return <li key={item.id}>{body}</li>;
};
export default Item;

key를 추가했지만 에러가 났다.
key설정은 map이 호출하는 컴포넌트 내부가 아닌 외부에서 진행해야한다!

id로 쓸 unique값이 없다면?

js map 함수는 반복문에서 index를 지원한다!

//App.jsx
...

return (
    <div>
      <ul>
        {lists.map((list, index) => (
          <Item item={list} id={index} />
        ))}
      </ul>
    </div>
  );

//Item.jsx
import react from "react";

const Item = ({ item: { body }, item, id }) => {
  console.log(id);
  return <li>{body}</li>;
};
export default Item;

아래는 id라는 이름으로 파라미터를 설정하고 index를 매개변수 넘겨준 상황이다.

id에 값이 0,1,2 출력되는것을 볼 수 있다.

이것을 key로 설정해주면된다.

참고사항

return (
    <div>
      <ul>
        {lists.map((list, index) => (
          <Item item={list} key={index} />
        ))}
      </ul>
    </div>
  );

import react from "react";

const Item = ({ item: { body }, item, key }) => {
  console.log(key);
  return <li>{body}</li>;
};
export default Item;

• key는 props로 사용할수 없다.
• 콘솔로 찍어보면 undefined를 리턴하니까 사용하지 말자

결론

map을 사용해서 반복하는 컴포넌트에 대해서 key값을 설정해줘야한다.

key값은 유니크해야한다.

개인적인 생각으로는 DOM TREE를 만들때 Item 컴포넌트가 형제노드로 위치하기때문인것 같다.