1. 리액트 시작

꾸빵이 2022. 2. 18. 01:28

vue.js, angular.js 등은 주로 MVC, MVVM, MVW 아키텍처로 애플리케이션을 구조화한다. 이 구조들의 공통점은 모델(M)과 뷰(V)가 있다는 것이다. 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역이고 뷰는 사용자가 보는 부분이다. 사용자가 버튼 클릭 등의 작업을 하면 컨트롤러가 모델 데이터를 수정하고 변경 사항을 뷰에 반영한다. 이 과정에서 보통은 뷰를 변형한다. 예를 들어,

{
"title" : "Hello",

"contents": "Hello World",

"likes": 1

}

<div class="title">Hello</div>

<div class="contents">Hello World</div>

</div>

여기서 JSON의 likes를 2로 바꾸면 html에서 post의 likes 요소를 찾아 수정해줘야한다. 이것은 매우 번거로운 일이다.

페이스북 개발팀은 이를 해결하기 위해 기존 뷰를 날려버리고 새로 렌더링하는 방식을 개발하였고, 이것이 바로 리액트이다. 리액트는 오직 뷰만 신경쓰는 라이브러리이다. 프레임워크가 아니라 라이브러리라는 것을 기억해둬야한다. 리액트는 다른 웹 프레임워크나 라이브러리와 혼용 가능하다.

리액트의 초기 렌더링 함수 render(){ ... }

컴포넌트가 어떻게 생겼는지 정의하는 역할
뷰에 대한 정보를 지닌 객체를 반환
함수를 실행하면 내부의 컴포넌트들이 재귀적으로 렌더링하고, 최상위 컴포넌트의 렌더링 작업이 끝나면 HTML 마크업을 만들고 이를 페이지의 DOM 요소 안에 주입함. 즉, 렌더링 -> HTML 마크업 -> DOM(주입) 순서이다.

조화 과정

컴포넌트는 데이터를 업데이트하면 새 데이터를 가지고 render 함수를 또 호출한다. 그러면 그 데이터를 가진 뷰가 생성된다. 이때 결과를 바로 DOM에 반영하지 않고, 이전의 컴포넌트 정보와 현재 컴포넌트 정보를 비교하여 최소한의 연산으로 DOM 트리를 업데이트한다.

DOM이란?

DOM은 객체로 문서 구조를 표현하는 방법으로, XML이나 HTML로 작성한다.
웹 브라우저는 DOM을 활용하여 객체에 JS와 CSS를 적용한다.
DOM은 트리 형태라서 특정 노드 찾기, 수정, 제거, 삽입이 가능하다.
동적 UI에 최적화 되어있지 않으며 JS로 이를 정적으로 만들어줄 수 있다.
DOM 자체는 빠르지만, 웹 브라우저 단에서 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트하여 느려진다. 이를 해결하려면 DOM을 최소한으로 조작하는 방법밖에 없다. 리액트는 virtual DOM 방식으로 사용하여 DOM 업데이트를 추상화하여 DOM 처리 횟수를 최소화한다.

Virtual DOM

실제 DOM에 접근하는 대신, 이를 추상화한 JS 객체를 구성하여 사용한다. 실제 DOM의 가벼운 사본이라고 생각하면 된다.
리액트에서 실제 DOM을 업데이트하는 과정은 이렇다. 데이터를 업데이트하면 전체 UI를 virtual DOM에 리렌더링한다. -> 이전 virtual DOM에 있던 내용과 현재 내용을 비교한다. -> 바뀐 부분만 실제 DOM에 적용한다.
하지만 virtual DOM이 무조건 빠른 것은 아니다. 이는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축에 유리하다.