리액트의 Virtual DOM은 무엇인가요? JSX는 무엇인가요?

- Virtual DOM이란 무엇인가요?

 

리액트는 기존에 M이 포함된 아키텍처 (MVC, MVVM 등)에서,

어플리케이션이 복잡해질수록 Model-View간의 구현 복잡도가 올라가는 문제점을 해결하기위해 나온 Flux 아키텍처를 기반으로 합니다.

 

그 과정에서 상태의 변화가 있으면, 기존의 DOM을 아예 새로 그리자는 철학을 가지고 있는데요.

매번 DOM을 새로그리게 된다면, reflow가 잦게 일어나는 것이므로 웹 페이지의 성능에 상당한 부담을 주게 됩니다.

 

그래서 나온것이 Virtual DOM입니다.

Virtual DOM은 말그대로 가상의 DOM으로써 메모리에만 존재하는 DOM입니다.

 

앞서 React에 DOM 업데이트가 일어났을때 DOM을 아예 새로그리는 것이 아니라, 이전의 DOM 상태를 기억하고 있는 Virtual DOM과 메모리 상에서 비교를 함으로써, 변경사항이 있는 부분만 실제 DOM에 렌더링을 하는 것입니다.

 

이로써, 변화한 부분만 재 렌더링을 하면 되기에 reflow비용을 줄일 수 있고,

잦은 변화가 발생할시, 내부적으로 그 변화들을 한번에 모아서 처리하는 최적화도 되어있기 때문에 성능에 대한 문제가 해결되게 되었습니다.

 

- 엥? 그럼 React.memo, useCallback, useMemo 등의 최적화 기법은 필요없었던 것인가요?

아니요. 방금 말씀드린 Virtual DOM은 DOM을 렌더링할때 이전에 저장된 vDOM과의 비교를 통해서 real DOM에 반영할지말지를 결정하는 방식인데요.

React.memo같은경우는 컴포넌트 자체를 memoization하여 props가 같으면 다시 렌더링하지 않고,

useCallback같은 경우는 컴포넌트가 렌더링 되기전의 함수를 memoization하는 것이고,

useMemo같은 경우는 컴포넌트가 렌더링 되기전의 값을 memoization하는 용도로 사용됩니다.

 

- key를 이용하는것과 virtual DOM과의 관계는 어떻게 되나요?

Virtual DOM이 발생하는 reflow를 줄여 성능을 높인다고 했는데, Virtual DOM도 어쨋든 비교연산이기 때문에 DOM Node의 개수에 따라서 복잡도가 높아질 수 밖에 없습니다.

 

그래서 React의 Diff 알고리즘은 다음과 같은 규칙을 추가하였는데요.

1. 엘리먼트 타입이 다르면, 아예 다른 트리를 만들어낸다.

2. key prop을 통해서 자식 엘리먼트의 변경사항을 알 수 있게 한다.

 

한마디로, Virtual DOM의 판단을 도와주는 것을 key라고 할 수 있을 것 같습니다.

이로써, key를 이용하면 형제 DOM끼리의 고유한 번호를 붙여서, 형제노드간의 변경사항을 쉽게 파악하는것에 사용됩니다.

 

 

- JSX란 무엇인가요?

Javascript Extension의 약자로, 말그대로 자바스크립트의 확장문법입니다.

외관상 html 코드 처럼 보이지만, babel이 알아서 dom 노드로 변환을 해주어 직관적으로 마크업 코드를 작성할 수 있습니다.