땅꼬마의 React 기초 개념 이해하기!

React 공부를 시작해보겠다고 했지만 막상 개념을 정확히 모른 상태에서 코딩을 하려하니..

왜 이렇게 되는거지?라는 부분이 해결이 되지 않았었다.

이번에 이론적인 부분을 정리하면서 React가 어떻게 동작하는지 정리해보려 한다.

 

1. VirtualDOM에 대한 이해

React로 개발된 친구들은 다른 친구들보다 빠른 이유는 가상돔(VirtualDOM) 덕분이다.

 

DOM(Document Object Model)은 웹페이지에 들어간 HTML 요소들을 트리형태로 표현한 것이다.

ex)

트리구조

->DOM이 제공하는 API를 통해서 조작할 수 있음

실제 DOM의 조작이 일어날때 브라우저가 HTML을 탐색하여 해당 요소와 자녀요소를 찾아 제거하고 새롭게 수정된 요소들로 교체한 후에 알맞게 css, 레이아웃정보를 계산하여 브라우저상에 보여준다.

이러한 일들이 매번 일어날 경우 비효율적인 작업이 일어난다.

 

가상돔은 실제돔과 똑같은 복사본으로 자바스크립트 객체로 메모리에 저장되어있다. 가상돔은 렌더링이전의 객체와 렌더링 이후에 변경된 객체를 가지고 있다. 1과 2를 비교해서 어떤 요소들이 변경되었는지 파악(Diffing) 과정을 거쳐 리액트는 Batch Update를 수행함으로 DOM에 한번에 적용시켜준다(Reconsiliation.재조정)

 

 

2. SPA(Single Page Application)

보통의 웹들은 여러페이지로 구성이 되어있다 (페이지 이동시 화면의 깜박거림)

즉 페이지를 이동할때마다 서버에서 페이지의 전체 리소스를 읽어와서 화면에 보여주는 작업이 이루어졌다.

 

React는 서버가 제공하는 페이지는 1개이며(index.html) html은 한번만 받아와서 웹을 실행시키고 이후  Routing(라우팅)을 통해 필요한 요소들만 받아와 화면에 업데이트 해준다.