React

 

학원에서 리액트에 대한 아주 기초적인 부분만 배워서 적어도 리액트를 통한 프로젝트를 구현하고 싶다는 목표로

벨로퍼트님의 리액트를 다루는 기술이라는 책을 읽게 되었다. 설명이 너무 잘되어있어서 아주 만족하면서 읽고 있다

 

 

리액트의 이해

 

자바스크립트의 프레임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-View Model) 아키텍처를

사용하여 애플리케이션을 구조화한다.

이러한 아키텍처의 구조는 데이터를 관리하는 model, 그 데이터가 사용자에게 보이는 view라는 부분이 존재한다

사용자로 인해 어떠한 이벤트가 발생하면(마우스 클릭 등) 컨트롤러가 모델 데이터를 수정하고, 변경된 사항을 뷰에 반영한다.

 

하지만 규모가 크면 클수록 이러한 구조가 매우 복잡해지고 제대로 관리하지 않으면 성능이 떨어진다.

그래서 모델을 통해서 데이터의 변화를 주는 것이 아닌, view를 계속 새롭게 렌더링 하는 방식이 나왔다.

이는 구조도 간단하며 코드의 양도 줄어든다.

 

하지만 이 방법은 CPU의 점유율 증가와 렌더링이 될 때마다 발생하는 화면 깜빡임이 발생할 수 있다는 문제점이 존재한다

그렇게 나온 것이 리액트이다. 리액트는 다른 프레임워크와 달리 view만 신경 쓴다.

 

리액트에서 render()라는 함수를 통해 컴포넌트의 생김새를 정의한다.

view의 생김새와 작동에 대한 정보를 지닌 객체를 반환하는데, 이 컴포넌트 내부에는 또 다른 컴포넌트들이 속할 수 있다.

다른 컴포넌트들이 들어가 있는 상태에서 render 함수를 실행하면 내부의 컴포넌트들을 참조하여 렌더링이 진행된다

이 과정이 끝나면 모든 정보들이 HTML 마크업이 되고, 이를 우리가 원하는 페이지의 DOM요소로 주입한다

 

리액트에서 뷰를 업데이트할 경우 '조화 과정을 거친다'라고 하는 표현이 더 맞는 표현이다 (뷰의 변화가 아닌 새로운 요소로 렌더링 하기 때문)

컴포넌트는 데이터를 업데이트할 때 새로운 데이터를 갖고 있는 render 함수를 또다시 호출한다 (데이터를 지닌 뷰 생성)

여기서 아까와 같이 바로 DOM에 반영하는 것이 아닌, 전의 render 함수가 만들었던 컴포넌트 정보와 비교해서 이 둘의 차이점을 알아내

DOM 트리를 업데이트한다.

 

리액트의 특징

 

우선 DOM은 XML, HTML로 작성하는 객체 문서 구조를 표현하는 방법인데 웹브라우저에서는 이를 활용하여

객체에 JS, CSS(CSSOM)을 적용한다. DOM의 단점은 동적 UI에 최적화되어 있지 않다는 것인데 자바스크립트로 동적이게 만들 수 있지만 규모가 큰 웹 애플리케이션에선 DOM에 직접적으로 변화를 주면 성능 이슈가 생긴다 (= 속도가 점점 느려짐)

DOM이 느리다고 생각할 수 있지만 사실 DOM은 빠르다. 다만 DOM에 변화가 일어나면 이를 웹브라우저가 처리하는 (레이아웃 구성,

리페인트 등..) 과정에서 시간이 걸리는 것이다.

DOM을 최소한으로 조작하여 성능을 개선할 수 있는데 여기서 리액트의 virtual DOM 방식으로 DOM에 직접 접근하는 대신

이를 추상화한 자바스크립트 객체를 구성하여 사용한다 (DOM의 가벼운 사본과 비슷)

이는 업데이트 처리에 대한 간결성을 주어 UI 업데이트 시 과정의 복잡성을 해결해주고 쉬운 업데이트를 도와준다.

 

 

 

 

 

Ref.

리액트를 다루는 기술 - 김민준