6주차 위클리 페이퍼 안내
아래 두 가지 주제에 대해서 각자 조사해서 답변을 제출해 주세요.
리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.
리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.
1. Virtual DOM:
Virtual DOM이란?
가상 DOM(Virtual DOM):
리액트에서 사용되는 개념으로, 메모리에 존재하는 가상의 DOM을 의미합니다.
실제 DOM과 동일한 구조를 가지지만 실제로는 브라우저에 직접 그려지지 않습니다.
Virtual DOM 사용 이유:
성능 최적화:
리액트는 UI 업데이트를 최적화하기 위해 Virtual DOM을 사용합니다.
변경된 부분만을 실제 DOM에 적용하는 것이 아니라, 전체 Virtual DOM과 이전의 Virtual DOM을 비교하여 변경된 부분만을 업데이트합니다.
DOM 조작 최소화:
브라우저에서 직접 DOM 조작은 비용이 높기 때문에, 이를 최소화하여 성능을 향상시킵니다.
변경이 필요한 부분만을 업데이트함으로써 렌더링 성능을 향상시킬 수 있습니다.
2. 배열 렌더링 시 key 사용:
key를 사용하는 이유:
고유성 보장:
리액트에서 배열을 렌더링할 때 각 요소에 고유한 식별자(key)를 제공해야 합니다.
key를 통해 리액트는 어떤 항목이 변경되었는지 빠르게 감지할 수 있습니다.
성능 최적화:
key를 사용함으로써 리액트는 새로운 항목이 추가되거나 삭제되었는지, 또는 순서가 변경되었는지 더 효율적으로 판단할 수 있습니다.
key를 사용하지 않으면 리액트가 전체 리스트를 비교해야 하므로 성능이 저하될 수 있습니다.
재사용성 증가:
key를 통해 리액트는 기존 DOM 요소를 재사용하고, 새로운 요소를 생성하는 비용을 최소화할 수 있습니다.
key가 없으면 리액트는 각각의 항목을 식별하기 위해 매번 새로운 DOM 노드를 생성해야 합니다.
예시:
jsx
Copy code
// key 사용 예시
const items = [
{ id: 1, content: 'Item 1' },
{ id: 2, content: 'Item 2' },
{ id: 3, content: 'Item 3' },
];
const itemList = items.map(item =>
:key 프로퍼티에는 고유한 식별자가 들어가야 합니다. 이는 해당 배열 요소가 변경되었는지 여부를 판단하는 데 중요합니다.
