본문 바로가기
React

리액트를 왜 쓰는 걸까?

by Vintz 2020. 11. 5.
반응형

자바스크립트도 아직 친해지지 못했는데 리액트란 녀석이 눈에 띄기 시작했습니다. 프론트 엔드 3대장 중 가장 인기있고 기업에서 요구하는 스택이기도 합니다. 여러 비교 영상이나 글도 굉장히 많아서 3대장을 쉽게 비교해 볼 수 있었고 결국 리액트로 결정했습니다.

 

제 개인적인 생각은 무겁고 배우는데 오래걸리는 앵귤러, 배우기는 쉽지만 개인 프로젝트에 적합한 뷰의 절충선이 리액트가 아닌가 싶습니다. 또한 리액트 웹사이트 설명이 굉장히 잘 되어있고 친절합니다. 하지만 결국 이것도 개인적인 생각이고 도구일 뿐입니다. 저희는 사용 방법을 익히고 본인에게 맞는 도구를 사용하면 됩니다.

페이스북은 왜 리액트를 만들었을까?

페이스북은 아마 단일 웹 사이트 중에서 가장 규모가 큰 웹 사이트가 아닐까 싶습니다. 게다가 사용자와의 상호작용이 굉장히 많은 이 DOM요소들을 관리하는건 정말 힘든 작업일 것 같습니다. 그렇게 페이스북은 DOM 조작이 쉽고, 유지보수가 쉬운 리액트를 개발하게 됩니다. 

Redux 창시자, React 개발팀원인 Dan Abramov의 트윗

리액트 개발팀원인 Dan Abramov는 "잘못된 생각 : 리액트는 'DOM 보다 빠르다'. 실제 : 리액트는 유지보수가 가능한 앱을 만드는 것을 도와주기 위함이고 대부분의 경우에 '충분히 빠르다'." 라고 했습니다. 충분히 빠르고 생산성이 좋아서 페이스북에서 쓰는 것 같습니다.

 

물론 리액트도 최적화 작업을 잘 해야하고, 최적화 작업을(제대로) 손수 했을때와 비교 해보면 대부분의 경우 후자(리액트 사용X 최적화)가 더 빠르다고 합니다.

리액트(React)란?

리액트 공식사이트를 들어가보면 제일 눈에 띄는 문구가 있습니다.
'사용자 인터페이스를 만들기 위한 JavaScript 라이브러리'.

리액트는 사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

이게 뜻하는 것이 무엇일까요? 리액트는 앱과 같은 환경을 웹에서 보여줄 수 있습니다. 즉, 로딩이 없는 듯한 사용자경험을 주게 됩니다. 브라우저상에서도 자연스러운 흐름으로 사용자와 대화형(상호작용) 웹앱이 가능하게 됩니다. 또한 데이터와 화면의 일치, 통일성이 좋아지며 중복되는 요소들을 컴포넌트화 시켜서 유지보수가 쉬워집니다. 이것들을 가능하게 만드는 리액트의 중요한 특징은 다음과 같습니다.

컴포넌트(Component)

리액트는 '컴포넌트(component)'라는 개념에 집중이 되어있는 라이브러리입니다. UI를 구성하는 개별적인 뷰 단위로써 전체 앱은 각 컴포넌트들을 결합해서 만들어지게 됩니다. 또한 컴포넌트들로 나눴기 때문에 앱의 다른 부분, 또 다른 앱에서 재사용이 가능해집니다. 

JSX

리액트를 위해 JavaScript를 확장한 문법을 JSX라고 합니다.

"Hello BY"라는 div를 생성하는 컴포넌트 입니다. HTML도 아니고 특이한 문법이네요. 리액트는 리액트를 사용하기 위해 JSX를 꼭 사용해야 되는 것은 아닙니다. 

순수 자바스크립트 코드

하지만 리액트의 특징 중 하나인 JSX 사용을 마다할 이유가 없죠. 시각적으로도 직관적일 뿐만 아니라 선언형 프로그래밍을 통해 생산성을 높여줍니다. 특히 유지보수, 협업에 강점을 발휘합니다.

Virtual DOM(VDOM)

이 글은 전반적으로 김민준(velopert)님의 블로그에서 참고한 부분이 많고 중복되는 내용이 있습니다. 특히 Virtual DOM은 [번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? 글의 도움을 많이 받았습니다. 굉장히 쿨하고 멋지게 번역을 해주셨습니다.

리액트의 가장 큰 특징 중 하나이며 가장 큰 주제이기도 합니다. 리액트만 Virtual DOM(VDOM)을 쓰는 것은 아닙니다. 다만 Virtual DOM을 성공적으로 사용한 선발주자입니다. Vue.js, Marko.js 등이 있습니다. Virtual DOM은 DOM 변화를 최소화 시켜주는 역할을 합니다. 이 횟수를 최소화 시키는 것은 성능적으로 중요합니다.

브라우저의 작동흐름

Virtual DOM을 이해하기 전에 브라우저가 어떻게 작동하는지 Webkit 엔진을 예로 들겠습니다. (작동방식은 대부분의 브라우저가 비슷합니다.)

이미지 출처 - HTML5ROCKS/Google Developers

며칠 전에 DOM에 대한 글을 쓴 적이 있는데 큰 그림으로 보겠습니다. 

DOM Tree 생성

브라우저가 HTML 파일을 전달 받으면, 브라우저의 렌더 엔진이 HTML을 파싱하고 DOM Node로 이뤄진 트리를 생성합니다. 각 노드는 HTML Element들과 연관되어 있습니다.

Render Tree 생성

외부 CSS 파일과 각 HTML Element의 Inline Style을 파싱합니다. Style Rules를 사용해서 DOM Tree와 같은 프로세스의 CSSOM Tree를 생성하고 Render Tree를 만듭니다.

Layout

Render Tree가 다 만들어지고 나면, 레이아웃 과정을 거칩니다. 각 노드들은 스크린의 좌표가 주어지며, 어느 곳에 표시될지 정확한 위치가 주어집니다.

Painting

마지막으로 사용자에게 보여질 화면을 그리는 과정입니다. 트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출하고 화면의 픽셀로 변환합니다. 즉, 화면에 원하는 정보가 나타나게 됩니다.

다시 Virtual DOM(VDOM)

DOM에 변화가 생기면, 렌더 트리를 재생성하고 레이아웃을 만들고 페인팅을 하는 과정을 반복하게 됩니다. 복잡한 SPA(Single Page Application)에서는 DOM 조작이 많이 발생합니다. 따라서 많은 변화, 즉 연산을 많이해야 하고 비효율적인 프로세스가 됩니다. 예를 들어 10개의 노드를 각각 수정하면, 그 뜻은 10번의 (잠재적인) 레이아웃 재계산과 10번의 (잠재적인) 리렌더링을 초래하게 된다는 것이죠.

Virtual DOM(VDOM)은 뷰에 변화가 있다면, 그 변화는 실제 DOM에 적용되기전, Virtual DOM에 먼저 연산을 시킨 후 그 최종 변화를 실제 DOM에 적용시킵니다. 따라서 실제 DOM은 딱 한 번의 연산만 하게되고 브라우저 내에서 발생하는 연산의 양을 줄여주는 것이죠. 모든 변화를 하나로 묶는 것이(한 번 렌더링 되는 과정에서 여러곳이 바뀌는 경우) 레이아웃 계산과 리렌더링의 규모는 커지겠지만, 실제 DOM은 한 번만 연산을 하게 됩니다.

다음 영상을 보시면 이해하는데 도움이 될겁니다. (시각적으로 친절하게 설명합니다.)

React and the Virtual DOM

이 과정은 Virtual DOM이 없어도 이뤄질 순 있습니다. Virtual DOM은 특정 기술이라기보단 패턴에 가깝습니다. 변화가 생길 때, 그 변화를 묶어서 DOM fragment에 적용한 후 기존 DOM에 적용시키면 됩니다. 하지만 Virtual DOM은 이 과정을 수동을 하나하나 관리하는 작업을 할 필요가 없습니다. 즉, 자동화하고 추상화를 해줍니다. 또한 어떤게 바뀌고 바뀌지 않았는지 일일이 확인하지 않아도 됩니다. Virtual DOM이 자동으로 해주니까요.

마지막으로, DOM 관리를 Virtual DOM이 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되며 특정 DOM을 조작한다던지 이미 조작된 것에 대한 정보를 공유 할 필요가 없습니다. 즉, 각 변화들의 동기화 작업을 거치지않으면서 모든 작업을 하나로 묶어줄 수 있습니다.


참고

리액트를 왜 쓰는가 - 제로초님 유튜브
Virtual DOM과 Internals - 리액트 공식사이트
리액트(React)는 왜 쓰는 건데!? - 홍대개발자님의 블로그
리액트는 무엇인가 - 김민준(velopert)님의 블로그
[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? - 김민준(velopert)님의 블로그
How Browsers Work: Behind the scenes of modern web browsers - HTML5ROCKS/Google Developers 
React: #1 React의 탄생배경과 특징 - Mungue Lee님의 블로그
반응형