React?

징징이·2021년 2월 10일
0

React 개념정리

목록 보기
1/1
post-thumbnail

React? React는 어떤 frontend framework일까?

React 하면 생각나는 단어를 생각해보면 SPA, Component, Virtual-DOM, FaceBook(?) 뭐 이런 대표적인 것만 생각이 난거같다. 이 중에서 가장 먼저 알아야하는게 뭘까 고민하다가 React를 본격적으로 시작하기 앞서 Virtual-DOM에 대해서 먼저 알아보기로 하자.

Virtual-DOM

Virtual-DOM 이름 그대로 가상 DOM이라는건데, 이거를 설명하기전에 먼저 DOM이 무엇이고, 왜 Virtual-DOM이 생기게 되었을까?

DOM(Document Object Models) 이란?

DOM은 이름 그대로 문서 객체 모델이다. 아래 그림처럼 DOM은 트리구조로 되어있다.

위 그림처럼 DOM Tree가 만들어지는 과정은 사용자가 브라우저에서 사용자가 URI로 요청을 하면 브라우저는 HTML을 받아와 렌더링 엔진이 구분 분석하고 각 엘리먼트들을 객체화 시켜 만든 DOM 노드로 DOM Tree를 만든다. 그리고 CSS 파일과 스타일링을 파싱하고 그 정보로 DOM Tree와 합쳐서 Render Tree를 생성한다. 그 후 Layout을 통해 각 노드의 위치를 잡아주고 마지막으로 사용자가 볼 수 있도록 Painting 작업을 완료하면 사용자가 볼 수 있는 브라우저 화면에 표시된다.

DOM은 위같은 과정을 거쳐서 만들어지고, 우리가 데이터를 변경하고 삭제하고 추가하는 작업을 할 수 있도록 도와준다.

이때 DOM에 변화가 생기면 다시 위와 같은 과정은 거치게 된다. 이 과정에서 DOM의 여러군데를 고치게 되면 그만큼 다시 위 과정을 반복을 하게된다. (100개의 고치면 100번 리렌더링을 한다고한다. 듣기만 해도 비효율적인거 같다..)

그래서!
생긴게 바로 Virtaul-DOM이라는건데, Virtual-DOM이 하는 역할은 위 과정들을 다 Virtual-DOM에서 미리 적용한 뒤 최종적으로 한 번만 실제 DOM에 반영한다는 것이다. (기존과는 달리 100개를 수정해도 바로 DOM에 반영되지않고 Virtual-DOM에 먼저 적용한 뒤 실제 DOM에는 한 번만 반영되기때문에 리렌더링은 한 번만 일어나게 된다.)

그래서 SPA(Single Page Application)을 자주 사용하는 React 경우 하나의 페이지에서 DOM조작이 빈번하게 일어나기때문에 Virtual-DOM을 사용하고 있다는 것이다.

참고한 글 중 "React는 DOM보다 빠르다"라기 보다, 좀 더 효율적이고 유지보수가 가능한 어플리케이션을 만드는데 도움을 주고 "충분히 빠르다" 정도라고 한다. (여러 번 리랜더링할 것을 한 번만 한다고 해서 빠른줄 알았네요..)

React 관련된 이야기를 하려고 시작했는데, 다른 이야기를 쓰다보니 길어져서 React 이야기는 다음 포스팅으로 이어가도록 하겠다.

참고

profile
노력

0개의 댓글