[JavaScript/ React] Virtual 동작원리

지난 브라우저의 동작원리에 이어 Virtual Dom의 동작원리를 알아보겠습니다.

Virtual Dom은 자바스크립트 객체로 표현할수 있습니다.

<>예시입니다.<> 

와 같은 예시가 있을때, 

let exam ={

tagName: 

attribute:{}

children:{]

} 과 같이 말이죠

 

Virtual Dom은 자바스크립트 객체로 활용되기 때문에 실제 Dom에서 동작하는것이 아닌, 메모리에서 동작하게 됩니다.

메모리에서 동작하닌깐 속도는 빠르겠죠?

지난번에도 말씀드렸듯이 Virtual Dom은 랜더링되지 않기 때문에 연산비용이 최소화가 됩니다.

그럼 무엇을 하는지는 알겠는데, 그래서 Virtual Dom은 뭔데?

 

Virtual Dom은 지금까지 설명한 과정을 추상화해놓은것입니다.

우리는 아무것도 하지않았고, 평소와 같이 화면에 있는 요소 하나를 바꾸었는데, 그 요소 하나만 랜더링이 됩니다.

즉, 자동화가 되어있죠.

 

위말도 살짝 모순이 있는게 요소 하나만 랜더링되는것이아닌, 요소의 묶음을 랜더링합니다.

두개의 화면이 있다고 가정해볼까요?

 

1번 화면)

타이틀입니다. 이름:  나이: 지역: 전화번호

2번 화면)

타이틀입니다. 이름:  나이: 지역: 전화번호

 

두 화면다 line당 하나의 <div>가 있다고 가정해봅시다.

실제 코드는 다음과 같겠죠?

<div>타이틀입니다.</div> <div>이름:</div> <div>나이:</div> <div>지역:</div> <div>전화번허</div>

위 두 화면에서 [지역:]에 값을 [사는곳:] 으로 바꾼다고 했을때

Virtual Dom을 사용하지 않고는 

타이틀입니다. 이름:  나이: 지역: 전화번호

전체를 다시 한번 랜더하게 됩니다.

 

하지만 Virtual Dom을 사용하게되면

바뀌지 않은 값은 그대로 두고 기존값과 다른 [지역:]을 [사는곳:]으로 바꾸고 랜더링하게 됩니다.

여기서 말하고 싶은건 저 한줄을 다시 랜더링하는것이아닌, 

<div>타이틀입니다.</div> <div>이름:</div> <div>나이:</div> <div>지역:</div> <div>전화번허</div>

를 하나로 묶어 랜더링하는것입니다.

 

즉, 각각의 요소를 랜더링해주는것이아닌, 요소를 하나로 묶어서 랜더링해주는것입니다.

바뀌는건 바꿔주고 모든 요소를 묶어 한번에 랜더링한다! 이말이죠. 그리고 DOM에게 줍니다.

 

정리해보자면  Virtual Dom은 변화를 적용하여 기존 DOM에게 준다.

그걸 자동,추상화 한것이다~ 라고 할수있습니다.

 

 

다음은 React를 살펴보도록 하겠습니다.