리액트란?
리액트는 페이스북에서 개발한 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다.
리액트는 프레임워크가 아닌, 라이브러리입니다. 따라서 MVC(Model-View-Controller)와 MVW(Model-View-Whatever) 등의 아키텍쳐를 가진 프레임워크와는 달리 오직 뷰만을 관리합니다. 다른 웹 프레임워크가 AJAX, 데이터 모델링, 라우팅 등의 기능을 내장하는 반면 리액트는 기타 기능을 직접 구현하거나 다른 라이브러리를 추가해 사용해야 합니다.
렌더링이란?
렌더링이란 사용자 화면에 뷰를 보여주는 것을 말합니다. 리액트에서는 렌더링을 '초기렌더링'과 '리렌더링'으로 구분합니다.
초기렌더링
초기렌더링은 맨 처음 화면에 보이는 뷰를 정의하는 동작을 말합니다. 리액트에서는 render() 함수를 사용합니다.
render() 함수는 html을 반환하는 것이 아니라 뷰가 어떻게 생겼고 동작하는지에 대한 정보를 지닌 객체를 반환합니다.
이 경우 render()를 실행하면 내부 컴포넌트도 재귀적으로 렌더링합니다. 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보를 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 직접 주입합니다.
- 문자열 형태의 HTML 코드를 생성
- HTML을 파싱하여 특정 DOM에 해당 내용을 주입하면 이벤트가 적용
DOM
DOM(Document Object Model)은 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다. 웹 브라우저는 DOM을 활용하여 객체에 javascript나 CSS를 적용합니다. 또한, 트리 형태를 가지기 때문에 특정 노드를 찾거나 수정, 제거가 가능합니다.
그러나, DOM은 동적 UI에 최적화되어있지 않습니다. HTML은 자체적으로 정적이고 자바스크립트를 사용해 동적으로 만들어야합니다. 하지만, 웹 브라우저에서 DOM에 변화가 일어나면 웹 브라우저는 CSS를 다시 연산하고, 레이어를 구성(리플로우)하고, 페이지를 다시 그리는데(리페인트) 이 과정에서 성능이 저하됩니다. 따라서 이를 해결하기 위해 DOM 조작을 최소화하는 방법을 고려해야 합니다.
리렌더링
리액트에서는 내부 구성 요소의 변경을 '조화과정(reconciliation)을 거친다'고 표현합니다. 단순히 '업데이트 한다'라고 표현하지 않는 이유는 컴포넌트에서 변화가 있을 때, 뷰의 구성 요소를 찾아 해당 부분의 값을 수정하는 것이 아니라, 새로운 요소로 갈아 끼우기 때문입니다.
컴포넌트는 데이터 업데이트시 새로운 데이터를 가지고 render()함수를 호출합니다.
이때 render()가 반환하는 결과를 바로 DOM에 반영하지 않고 이전에 render()가 만든 컴포넌트 정보와 비교합니다. 자바스크립트를 사용하여 두가지 뷰를 최소한의 연산으로 비교하고 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트합니다. 방식 자체는 루트노드에서부터 시작하여 전체 컴포넌트를 다시 렌더링 하는 것처럼 보이지만 최적의 자원을 통해 이를 수행합니다.
Virtual DOM
리액트는 Virtual DOM을 사용하여 DOM 업데이트를 추상화하고, DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.
Virtual DOM은 실제 DOM에 접근하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
- 이전 Virtual DOM에 있는 내용과 현재 내용을 비교
- 바뀐 부분만 실제 DOM에 적용