Virtual DOM이란? 배열을 렌더링할 때 key를 써야 하는 이유?

Virtual DOM

Virtual은 말 그대로 가상이라는 뜻, DOM은 Document Object Model의 약자로 문서 객체 모델을 의미합니다.

즉 문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체를 의미합니다.

개발을 하면서 자주보게 되는 div, input, a 등이 DOM에 해당하며, 실제 돔은 아닌 복사본으로 실제 돔과 같은 내용을 담고JS객체 형태로 메모리안에 저장되어 있습니다.

 

DOM

 

기존의 DOM은 HTML을 직접적으로 업데이트하며 새로운 element가 업데이트된 경우 새로운 DOM을 생성하기에 업데이트 속도가 느리고 메모리 낭비가 심한 반면, Virtual DOM은 HTML을 직접적으로 업데이트 하지않고 새로운 element가 업데이트 된 경우에도 새로운 가상 DOM 생성 후 이전 DOM과 비교 후 차이점 DOM만 업데이트하기에 업데이트가 빠르고 메모리 낭비가 덜한 장점을 가지고 있습니다.

배열 렌더링시 key를 쓰는 이유

key는 각 항목을 구별할 수 있도록 도와주는 유일한 식별자입니다.

리액트가 배열 목록을 효율적으로 업데이트하고, 순서가 변경되거나 요소하나가 삭제되어도 정확히 변경 요소만 업데이트할 수 있게됩니다.

만약 key가 없다면 리액트는 배열의 인덱스를 사용해 업데이트를 수행하게되는데 인덱스는 일정하지 않기에 예측이 불가해집니다.

 

각 요소를 렌더링 할 때는 key Prop을 내려줘야 하는데, 아래 예시처럼 가장 바깥쪽에 있는 (최상위) 태그에다가 key Prop을 지정하면 됩니다. 

import items from './pokemons';

function Pokemon({ item }) {
  return (
    <div>
      No.{item.id} {item.name}
    </div>
  );
}

function App() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.name}>
          <Pokemon item={item} />
        </li>
      ))}
    </ul>
  );
}

export default App;
`