React 이해와 특징

Chori·2022년 8월 1일
1

React

목록 보기
1/5
post-thumbnail

이 글은 책 리액트를 다루는 기술을 학습하여 정리하는 글입니다.

이해

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다.
MVC, MVW 등의 구조와 달리 오직 V(View)만 신경쓰는 라이브러리다.

초기 렌더링

render 함수를 통해 맨 처음 화면을 어떻게 출력할지 정할 수 있다.(초기 렌더링)

리엑트는 특정 부분을 어떻게 구성할지 정하는 선언체가 있는데, 이를 컴포넌트라고 한다.

render 함수는 이 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 또한 HTML 형식의 문자열을 반환하지 않고, 뷰에 대한 정보를 가진 객체를 반환한다.

컴포넌트 내부에 또 다른 컴포넌트가 들어갈 수 있다. 이때 render 함수를 실행하면 내부에 있는 컴포넌트도 재귀적으로 렌더링한다.

컴포넌트 렌더링이 끝나면 컴포넌트의 정보를 사용해 HTML 마크업을 만들고 DOM 요소 안에 주입한다.

조화 과정

화면의 뷰가 변경될 때, 조화 과정을 거친다.
업데이트가 아닌 조화 과정이라고 하는 이유는, 데이터의 변화가 있으면 뷰가 변경되는 것이 아니라 새로운 요소로 갈아끼우기 때문이다.

이 작업도 render 함수가 처리한다. 컴포넌트의 데이터를 업데이트 했을 때, 업데이트 한 값을 수정하는게 아니라 새로운 데이터로 render 함수를 다시 호출한다.

그런데 이렇게 하면 컴포넌트의 크가 커질 수록 반환해야하는 객체가 많아진다.
때문에 곧바로 DOM에 반영하지 않고 이전에 render 된 DOM과 비교하여 변경된 DOM 노드들만 변경한다.

그래서 조화과정의 방식은 전체 컴포넌트를 다시 렌더링하는 것으로 보이지만, 최적의 자원으로 렌더링을 수행한다는 것을 알 수 있다.

특징

Virtual DOM

DOM (Domain Object Model)이란, 객체로 문서구조를 표현하는 방법이다.
웹브라우저는 DOM을 활용해 객체에 JS와 CSS를 적용한다.
DOM은 Tree구조로 특정 노드를 찾거나 생성 및 수정 제거가 간편하다.

DOM의 치명적 단점은 동적 UI가 최적화되지 않는다는 것이다.
HTML 자체만으로는 정적이기 때문이다. JS를 통해 동적으로 바꾸는 것이 가능하지만, DOM에 변화가 생기면 웹브라우저가 리페인팅 되어 시간이 허비된다.

리액트는 Virtual DOM(가상 돔) 방식을 사용한다.
가상 돔은 DOM 업데이트를 추상화함으로 일반 DOM 보다 처리 횟수를 최소화한다.

리액트에서 Virtual DOM을 업데이트 할 때의 3가지 절차
1. 데이터를 업데이트 하면 전체 UI를 가상 돔에 리렌더링 한다.
2. 이전 가상 돔에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다

위 3가지 절차를 보면서 궁금한 점이 생겼다.

"일반 DOM 전체를 렌더링 하는 것보다, 리액트로 Virtual DOM의 변경된 부분만 변경하는 것이 더 효율적인가?"
궁금증이 들었다. DOM의 노드끼리 비교하는 것에 연산이 들지 않을까 생각되었기 때문이다.
그와 관련된 내용으로 잘 설명해주는 블로그가 있다.

정리하자면 브라우저에서 제일 성능을 많이 잡아먹는 것은 렌더링 과정이라고 한다.
특히 Reflow가 순간적으로 많이 발생할 경우 치명적이다.

각설하고, 리액트는 (더 효율적이고 쓸만하니까 만들었겠지) 지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축할 때 유리하다. 항상 리액트가 좋다고만 주장할 수는 없는 것이다.
동적인 페이지가 아닌 정적인 페이지가 많은 어플리케이션에서는 리액트는 효율을 보기 어려울수도 있다.

profile
꾸준한 성장

0개의 댓글