React - 데이터 배열 렌더링 하는 방법 key를 입력해야 하는 이유

리액트에서 배열을 렌더링 할 수 있는 방법이 있습니다.

 

Javascript 문법 중 map 함수를 이용해서 데이터 렌더링을 할 수 있습니다.

Array.prototype.map() - JavaScript | MDN

 

리액트 배열 렌더링하기

아래와 Array 함수 map을 실행시켜서 배열을 렌더링 할 수 있습니다.

map 함수의 첫번째 인자는 배열의 내부의 객체이고 두 번째 인자는 index 순서입니다.

단 key 값을 입력하지 않으면 오류가 발생합니다.

const userInfo = [
  {
    id: 1,
    name: "Superman",
  },
  {
    id: 2,
    name: "Batman",
  },
  {
    id: 3,
    name: "Pororo",
  },
];

export default function Dev() {
  return (
    <ul>
      {userInfo.map((user, index) => {
        return <li key={user.id}>name : {user.name}</li>;
      })}
    </ul>
  );
}

 

왜 key 값을 입력해야하나요?

리액트에서 key값을 보고 개별 아이템을 인식할 수 있고,

배열이 변경되어 리렌더링이 필요할 때,

재사용할 수 있기 때문에 불필요한 렌더링을 줄일 수 있어 성능 최적화에 도움이 됩니다.

 

key값이 없으면, 배열의 길이만 체크하고, 현재 렌더링 된 아이템만 체크합니다.

key 값은 해당 배열의 고유의 값을 입력하는 것이 좋습니다.

없다면 map 함수의 두 번째 파라미터인 index를 사용하셔도 되는데, 권장하는 방법은 아닙니다.