코드잇 스프린트 5주차 위클리페이퍼✏️

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

Virtual DOM

Virtual DOM은 웹 애플리케이션의 성능을 향상시키기 위한 개념 중 하나다. 가상 DOM은 실제 DOM(문서 객체 모델)의 가벼운 복제품이라고 생각할 수 있다.

웹 애플리케이션은 사용자와 상호 작용할 때마다 DOM의 변경이 발생한다. 변경되면 화면이 업데이트 되고, 복잡한 애플리케이션이라면 성능 문제가 발생할 수 있다.
그리고 DOM 변경은 비용이 많이 들기 때문에 업데이트가 잦다면 그만큼 손실이 크다.

이런 문제를 해결하기 위해 Virtual DOM이 만들어졌는데, 브라우저 실제 DOM을 변경하는 대신, 가상 DOM을 사용해 상태 변경을 추적하고 실제 DOM과 가상 DOM을 비교해서 변경 사항을 최소한으로 업데이트 한다. 이렇게 Virtual DOM을 통해 불필요한 DOM 조작을 줄이고 성능을 향상시킬 수 있다.

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

key 속성을 사용하는 이유

React에서 배열을 렌더링할 때 key 속성을 사용하는 이유는 효율적인 업데이트와 성능 최적화를 하기 위함이다.

• 고유성 보장: key는 각각의 요소가 고유하다는 것을 보장한다. React는 각 요소의 key를 사용하여 업데이트된 리스트와 이전 리스트를 매핑하고, 이를 통해 변경된 부분만을 업데이트한다. 만약 key가 없거나 중복된 경우, React는 효율적인 업데이트를 수행하기가 어렵다.

• 성능 최적화: key를 사용하면 React는 변경된 요소만을 감지하고 업데이트한다. 이로써 불필요한 렌더링과 DOM 조작을 방지할 수 있다. 특히 동적으로 변하는 리스트에서 성능 향상이 두드러진다.