리액트

리액트란?

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만들때 사용한다. 프레임워크에서 자주 쓰이는 패턴인 MVC로 예를 들면,V만 신경쓰는 라이브러리이다. 리액트로 애플리케이션을 만들 때 재 사용가능한 형식으로 만들게 된다. 이를 컴포넌트라고 하는데 수많은 기능을 내장하고 있다. 사용자 화면에 보여주는 것을 렌더링이라고 한다. 리액트는 변경된 부분만 리렌더링을 통해 성능과 사용자 경험을 향상 시킨다.

 

렌더링

리액트의 render() 함수는 컴포넌트가 어떻게 만들어지는지 정의하는데 사용된다. 단순 HTML 태그를 리턴하는 것이 아닌 작동에 대한 정보를 지닌 객체를 반환한다. 리액트는 해당 정보를 재귀적으로 렌더링하여 HTML을 만들고 실제 페이지의 DOM 요소에 주입하여 브라우저에서 보여주게 된다. 사용자가 애플리케이션을 사용할 때 조화 과정을 거치게 되는데 DOM 트리 형태로 되어 전달된 요소에 변경이 있을 경우 이전 노드와 새로운 노드를 비교하여 변경된 DOM 트리만 업데이트 한다.

 

Virtual DOM

DOM이란 Document Object Model의 약어로 객체로 문서 구조를 표현하는 방법이다. 웹 브라우저는 DOM을 활용해 자바스크립트와 CSS를 적용한다. 사용자 환경에 따라 변하는 UI는 DOM에 치명적인 문제점으로 적용됐다. 웹 브라우저에서 DOM의 변화가 일어날 경우 다시 연산을 해서 사용자에게 전달되는데 이 과정에서 많은 시간을 허비하게 되었다. Virtual DOM을 사용하면 실제 DOM에 접근하는 것이 아닌 추상화 된 자바스크립트 객체를 구성하여 사용한다. 다음 절차로 실제 DOM에 업데이트 된다.

1. 데이터 업데이트 시 전체 UI를 Virtual DOM에 리렌더링 한다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용한다.