react란
리액트는 자바스크립트의 라이브러리중 web, app의 view를 만들 때 에 활발하게 사용 되고 있는 라이브러리이다.
리액트를 사용하지 않아도 HTML, CSS, JavaScript등 을 활용하여 웹 페이지를 만들 수 있지만, 리액트를 사용하면 사용자와 상호작용 할 수 있는 동적인 UI를 쉽게 만들 수 있다.
리액트의 특징으로는 Component 구조, virtual DOM 등 이 있다.
Component 구조
리액트는 여러 컴포넌트들을 합쳐 하나의 view로 구성하게 됨.
한 페이지에서도 여러 각 부분들을 각각의 컴포넌트(모듈)로 구성하고 이들이 합쳐져 하나의 페이지를 이루게 된다.따라서 하나의 페이지라도 여러개의 컴포넌트가 기능,UI 단위로 캡슐화되어 구성되있기 때문에 전체 코드를 파악하기가 용이함.
캡슐화를 통해 만들어뒀던 컴포넌트를 불러와 사용할 수 있어 재사용하기도 좋으며, 차후에 유지보수, 관리 역시 편해진다는 장점이 있음
virtual DOM
DOM
먼저 DOM이란 Document Object Model의 약자로 '문서 객체 모델' 이라는 뜻을 가지고있다.
뜻을 보아도 어떤것인지 잘 이해가 가지않는데 하나씩 풀어서 살펴보자.
먼저 '문서 객체'란 HTML에서 사용되는 <html> 이나 <body>같은 태그들을 JavaScript가 사용할 수 있는 객체로 만든다면 그것을 '문서 객체' 라고 한다.
이러한 태그(문서 객체)들로 이루어진 HTML문서를 브라우저가 이해할 수 있는 형태로 만들기위해 파싱을 거쳐 HTML문서의 계층적 구조와 정보를 표현하는 tree의 형태로 만들게 되는데 이를 DOM tree라고 한다.
따라서 HTML문서의 Document Object(태그)들을 기반으로 브라우저가 이해할 수 있는 Model(tree)로 만든것이 DOM이다.
virtual DOM
DOM이 위와 같다면 virtual DOM은 무엇일까?
virtual DOM은 말 그대로 '가상 DOM'을 의미하며 브라우저가 실제로 받게되는 DOM이 아닌 메모리에 존재하는 가상의 DOM이다.
또한 메모리에 존재하는 JavaScript 객체상태로 존재하기때문에 실제로 브라우저에서 보여주는 DOM보다 작동성능이 더 빠르다.페이지를 렌더링할때 HTML문서의 내용을 바탕으로 DOM을 만들고 브라우저에서 DOM을 이용하여 페이지를 렌더링하는데 이때 렌더링할 내용이 변하게 된다면 변경된 내용의 HTML문서를 바탕으로 다시 DOM을 만들고 이를 렌더링하게 된다.
리액트에서는 변경사항이 생겼을때 새롭게 DOM을 만들어서 바로 렌더링하는 것 이 아닌 virtual DOM을 통해 먼저 렌더링 한 뒤 현재의 DOM과 비교하여 차이가 생긴곳만 실제 DOM에 패치해주어 좀 더 효율적인 성능을 보여준다.
