리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

DOM (Document Object Model):

실제 구조:

DOM은 웹 페이지의 실제 HTML 요소들을 나타내는 트리 구조입니다. 각 HTML 태그는 DOM의 노드로 표현됩니다.

JavaScript를 사용하여 DOM을 동적으로 조작할 수 있습니다. 즉, 웹 페이지의 내용, 구조, 스타일 등을 동적으로 변경할 수 있습니다.

DOM 조작은 브라우저에 즉시 반영되며, 변경된 부분만을 다시 렌더링합니다.

DOM 조작이 많이 발생하면 브라우저는 실제 화면에 대한 다시 그리기를 자주 수행해야 하므로 성능 문제가 발생할 수 있습니다.

Virtual DOM (가상 DOM):

Virtual DOM은 실제 DOM을 메모리 상에 복제품을 만드는것이라고 할수 있습니다.

작업의 순서 : DOM은 Javascript로 동적 조정 변경이 가능하지만 react virtual dom에서 변경부분 파악후 변경부분이나 필요부분을 다시 렌더링합니다
여러 상태 업데이트가 동시 발생하면 일괄처리하여 효율성과 성능을 개선하는데 도움이 됨.

Virtual DOM을 통해 React는 렌더링이 필요한 실제 DOM의 부분을 효과적으로 찾아내고, 필요한 경우에만 렌더링을 수행하여 성능을 최적화합니다.
간단히 말하면, DOM은 실제 HTML 요소의 트리 구조이고 직접 조작이 가능한 반면, Virtual DOM은 메모리 상의 가상 복제품으로 React가 상태 변경을 효율적으로 처리하고 성능을 최적화하는 데 사용됩니다. React는 Virtual DOM을 활용하여 변경 사항을 효과적으로 감지하고 최소한의 작업으로 업데이트를 수행하여 성능 향상을 이루어냅니다.

리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

React에서 배열을 렌더링할 때 key 속성을 사용하는 이유는 가상 DOM의 효율적인 업데이트와 관련이 있습니다.

유일성 보장: key 속성은 각각의 요소에 고유한 식별자를 부여합니다. React는 각 요소의 key를 사용하여 요소를 추적하고 업데이트를 수행합니다. 이는 각각의 배열 요소가 서로 구별되어 React가 어떤 요소를 추가, 수정 또는 제거해야 하는지 판단하는 데 도움이 됩니다.

성능 최적화: key를 제공하면 React는 변경된 부분만 업데이트할 수 있습니다. 예를 들어 배열에서 요소를 추가하거나 제거할 때, key가 없으면 React는 모든 요소를 다시 렌더링해야 합니다. 하지만 key를 사용하면 변경된 요소만 업데이트되므로 성능이 향상됩니다.

동적 엘리먼트의 상태 유지: key를 통해 React는 동적으로 추가되거나 변경된 엘리먼트의 상태를 유지할 수 있습니다. 만약 key가 없으면 React는 새로운 요소를 기존 요소로 간주하고 상태를 제대로 추적하지 못할 수 있습니다.

jsx
Copy code
const items = [1, 2, 3];

const itemList = items.map((item) => (
  <div key={item}>{item}</div>
));

ReactDOM.render(<div>{itemList}</div>, document.getElementById('root'));

이렇게 key를 사용하면 React는 각각의 div를 고유하게 식별할 수 있고, 배열이 변경될 때 효율적으로 업데이트를 수행할 수 있습니다.