[Weekly Paper] 6. Virtual DOM & React 배열 렌더링 key

Virtual DOM  

• UI의 이상적인 또는 "가상" 표현을 메모리에 보관하고 ReactDOM과 같은 라이브러리에 의해 "실제" DOM과 동기화되는 프로그래밍 개념이다.
• 실제 DOM과 같은 내용을 담고 있는 복사본 → js 객체 형태로 메모리 안에 저장되어 있다.
• 실제 DOM의 메모리상의 표현이며, 실제 DOM의 가벼운 사본이라고 볼 수 있다.
• 실제 DOM의 모든 element와 속성을 공유한다.
• 실제 DOM의 구조를 반영하며, 렌더링하는 데 필요한 정보만을 가지고 있다.
• 브라우저에 있는 문서에 직접적으로 접근할 수 없어서 화면에 보여지는 내용을 직접 수정할 수 없다.
• 렌더링 성능을 향상시키기 위해 가상 DOM을 사용하여 실제 DOM과의 차이를 최소화한다.
• 가상 DOM은 실제 DOM과 비교하여 변경된 부분을 찾아내고, 변경이 발생한 부분만 실제 DOM에 패치하는 역할을 한다. 이를 통해 실제 DOM에 대한 불필요한 연산을 줄이고 렌더링 성능을 개선할 수 있다.
• 변경이 발생한 부분을 적용시킬 때 변경이 발생한 모든 요소들을 집단화시켜 한번에 실제 DOM에 적용한다.

---

React 배열 렌더링 key

• key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 역할이다.
• 요소에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
• key는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 가장 좋은 방법이다.(대부분의 경우 데이터의 id를 key로 사용한다)
• 렌더링 한 항목에 대해서 id가 없다면 최후의 수단으로 배열의 인덱스를 key로 사용할 수도 있지만 권장하지 않는다.(항목의 순서가 바뀔 수 있는 경우 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다)
• key는 반드시 변하지 않고, 예상 가능하며, 유일해야 한다.
• key는 형제 노드에서만 고유하면 된다. 전역에서 고유할 필요는 없고 해당 배열안에서만 고유성을 유지하면 된다.
• 변하는 key를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다.