React를 다루는 기술 책 기반으로 리액트를 취미로 정리하기 위한 카테고리로 심심할때 포스팅할 예정. 다른것도 할게 많다.

1. 리액트란?

1-1. Virtual DOM

DOM은 Document Object Model의 약어로 객체로 문서 구조를 표햔하는 방법으로 XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용해 보여지는 개념이다.

그런데 웹 페이지가 변경 될 떄마다 매번 동적으로 DOM을 조작할 수 없기 때문에 리액트에서는 Virtual DOM이라는 것을 사용한다.

리액트는 Virtual DOM 방식을 사용하여 DOM업데이트를 추상화함으로써 DOM의 변경을 최소화하고 효율적으로 변경한다. 리액트에서 데이터가 변경되었을 때 웹 브라우저에서 실제 DOM을 업데이트 할 때는 아래와 같이 진행된다.

1 ) 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2 ) 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3 ) 변경 된 부분만 실제 DOM에 적용

1-2. 컴포넌트와 렌더링

리액트에서는 특정 부분의 View를 보여주는 객체가 component인데, 다른 프레임워크에서 접하는 template방식하고는 다른 개념이다. 보통 Vue나 handlebar 등에서는 template UI에 data가 set이 되서 반환되지만, component는 view와 작동 방식을 정의한다.

사용자 화면에 뷰를 보여주는 것을 렌더링이라고 하며, 컴포넌트가 최초로 실행한 ‘초기 렌더링’과 컴포넌트 데이터 변경으로 다시 실행되는 ‘리렌더링’으로 나눠진다.

초기 렌더링(render함수)에서는 DOM트리에 view와 어떻게 작동하는지에 대한 컴포넌트 객체를 반환하는 것이다. 그러면 리렌더링(조화과정)에서 render함수에서 만든 컴포넌트정보와 re-render된 컴포넌트 정보를 비교해 최소환의 연산으로 비교 후에 변경된 컴포넌트(DOM트리)만 업데이트 한다.

1-3. 기타 특징

리액트는 다른 웹 프레임워크와 다르게 MVC, MVM 등 구조와 달리 오직 View만 담당하는 라이브러리이다.

[출처]

• 리액트를 다루는 기술-김민준 저자(글)