00/
리액트란?
React리액트는 자바스크립트를 기반으로 한 프레임워크 중 하나입니다. 프레임워크는 쉽게 말해 목적에 따라 효율적으로 구조를 짜놓는 개발 방식입니다. (자세한 내용은 다음 링크를 참조하십시오.)
프레임워크들은 주로 MVC(Model View Controller) 아키텍쳐, MVVN(Model View View Model) 아키텍쳐를 사용합니다. 이와 같은 구조들이 지닌 공통점은 모델Model 과 뷰View가 있다는 것이지요. 쉽게말하자면 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 부분입니다.
리액트는 이들과는 다릅니다. 리액트는 오로지 V(view)만 신경쓰는 라이브러리입니다. 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 페이스북 개발팀에서 개발한 물건이지요.
01/
컴포넌트
리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(Component)라고 합니다. 컴포넌트는 다른 프레임워크에서 사용하는 템플릿과는 다릅니다.
컴포넌트는 템플릿 보다 더 복잡한 개념입니다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 컴포넌트는 재사용으 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다.
02/
렌더링
사용자 화면에 뷰view를 보여 주는 것을 렌더링이라고 합니다. 리액트의 라이브러리는 데이터가 변할때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공합니다. 어떻게 그게 가능할까요? 비밀은, '초기 렌더링'과 '리렌더링' 에 숨어있습니다.
초기 렌더링
어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 랜더링이 필요합니다. 이 액트에서는 이를 다루는 render함수가 있습니다.
render(){...}
이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다. 이 함수는 또한 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다.
(컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있습니다. 이때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HMTL 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입합니다.)
렌더링 -> HTML 마크업 -(주입)-> DOM(문서 객체 모델)
리렌더링
리액트에서 리렌더링은 상태가 변화할 때 발생하는데 Virtual DOM에서 변경된 혹은 업데이트된 내용을 이전 값과 비교하여 변경된 값에 대해 렌더링을 해주는 (DOM 트리를 업데이트해주는) 것을 의미합니다.
리액트에서 뷰를 업데이트 할 때에는 "조화 과정reconciliation을 거친다"라는 말을 주로 사용합니다. 왜 평범하게 "업데이트 한다"고 말하지 않는 걸까요?
왜냐하면 컴포넌트에서 데이터 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아끼우기 때문입니다.이 작업 또한 render 함수가 맡아서 합니다. 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다. 즉, 그 데이터를 지닌 뷰를 생성해 내는 것입니다.
하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM 문서 객체 모델에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다.
자바스크립트는 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 하는 것입니다.
결국 방식 자체는 전체 컴포넌트를 처음부터 다시 렌더링하는 것처럼 보이지만, 사실은 최적의 자원을 사용하여 이를 수행하는 것입니다.
03/ Virtual DOM
DOM
Document Object Model의 약어인 DOM은 '문서 객체 모델'이라고 부릅니다. DOM은 객체로 문서 구조를 표현할 수 있는 XML이나 HTML으로 작성합니다. 웹 브라우저는 DOM을 이용해 객체에 자바스크립트나 CSS를 적용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입 가능합니다.
DOM에는 한가지 치명적인 단점이 있는데, 바로 동적 UI에 최적화되어 있지 않다는 것입니다. HTML은 자체적으로는 정적입니다만, 자바스크립트를 사용해 이를 동적으로 만들어 줄 수 있습니다.
그러나 요즘 흠하게 접하는 큼 규모의 웹 애플리케이션(트위터, 페이스북, 인스타그램 등등)같은 경우에는 스크롤을 내릴수록 수많은 데이터가 로딩됩니다. 그 데이터들을 표현하는 요소들은 그보다 훨씬 더 많아집니다. 이렇게 데이터를 불러오는 과정이 쌓이다 보면 결국 성능 문제로 직결되게 됩니다. 한마디로 느려지게 되는 겁니다.
DOM 자체는 빠릅니다. 결코 자바스크립트 객체를 처리할 때의 성능과 비교하여 다르지않지요.단, 웹 브라우저 단에서 DOM 에 변화가 일어나면 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 하는 그 과정에 시간이 낭비되는 것일 뿐입니다.
DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하될 수 있습니다. 이를 방지하기 위해서라도 DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선할 수 있겠지요. 리액트는 'Virtual DOM가상 문서 객체 방식'을 사용하여 DOM 업데이트를 추상화합니다. 이로써 DOM 처리 횟수를 최소화하고 효율적으로 진행하는 것이지요.
04/ 마치며
적재적소라는 말이있습니다. 리액트를 다룰 때도 마찬가지 입니다. 리액트를 사용할 최적의 장소에서 리액트를 사용해야지 진가가 발휘되는 법입니다. 리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 바로 업데이트 처리 간결성입니다. UI를 업데이트 하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있습니다.
리액트는 라이브러리입니다.
프레임워크가 아닙니다. 뷰View만 당당하고 있기 때문에 다른 기능은 직접 구현해야 한다는 단점이있습니다.
하지만 괜찮습니다.
다른 개발자들이 개발한 라이브러리, 즉 라우팅를 이용해 리액트의 기능을 보완하면 되니까요. 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있기 때문에 범용성은 높은 편이니 너무 걱정하지 않으셔도 됩니다.
출처 : 리액트를 다루는 기술 (김민준 저)
