REACT. DOM / 가상 DOM

개요

가상돔 가상돔 가상돔이란 말이 들린다

근데 내 귀는 막혀 있다

 

공부를 해보자

 

본문

선행 이해

리액트에 대한 이해가 먼저다

 

일단 리액트에서 돔이 어떻게 돌아가는지 알아보자

 

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다

즉 뷰(View)만 신경쓰는 라이브러리이다

 

조금 다르게 말하자면 렌더링 한다고 하는데,

렌더링이란 사용자 화면에 뷰를 보여 주는 것이다

 

말이 꼬리에 꼬리를 무는 것 같지만 느낌 정도만 가져가면 될 거 같다

왜냐면 귀에 피나도록 들을건데, 지금 조금의 이해만 돕는다면 나중에 저절로 습득 될 거다

 

초기 렌더링

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 

맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다

즉 초기 뷰를 보여주기 위한 작업을 한다

 

여기서 부터가 중요하다!!!

값이 변환되면 어떻게 되는가?

전체를 렌더링 하지 않고, 비교한 후 바뀐 부분만 렌더링 해준다

이로써 최적의 자원을 사용하여 수행할 수 있다

 

이제 가상 돔을 알아보자

1. 데이터를 업데이트하면 전체 UI를 가상 돔에 리렌더링 한다

2. 이전 가상 돔에 있던 내용과 현재 내용을 비교한다

3. 바뀐 부문만 실제 돔에 적용한다

(사실 위에 것과 비슷하다 허탈함과 뿌듯함이 공존한다면 당신은 100% 이해한거다)