리스트와 Key

공식자료 참조 : https://ko.reactjs.org/docs/lists-and-keys.html

1. 각 리스트에는 key값을 넣어줘야 함

이유 - key를 통해 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하기 위해

: 만약 key가 없으면 기존의 Dom(li 요소들)과 변경된 Dom을 비교하는 과정에서
리스트를 하나하나 다 비교하면서 변화를 감지해야되서 비효율적이고 성능이 좋지 않음.

: key값을 통해 기존 Dom트리와 이후 Dom트리가 일치하는지 확인하여, 트리의 변환이 효율적으로 이뤄질 수 있음.

2. key값은 유니크 해야 함

: 엘리먼트에 안정적인 고유성을 부여하기 위해, 리스트 요소에 고유한 key값을 줘야함.

3. index값을 key값으로 이용하는건 최후수단으로 활용해야.

이유

: 리스트 항목의 순서가 바뀔 수 있는 경우 index값도 바뀌므로 효율적으로 리렌더링 하지 못함.

---

예제코드

import { useState } from "react";

function App() {
  const [arr, setArr] = useState(["a", "b", "c", "d", "e"]);

  return (
    <div>
      <ul>
        {arr.map((el, idx) => (
          <li key={idx}>{el}</li> // 각 li마다 유니크한 key값을 넣어줌!
        ))}
      </ul>
    </div>
  );
}

export default App;

• 질문1 - map의 반환값은 배열인데 어떻게 자동으로 html요소로 렌더되는지?
  : jsx파일이기 때문에 jsx파일에 배열이 들어간 후, jsx를 바벨로 트랜스파일 하여 html요소로 출력되는 것임!