리액트(React.js) 개요

 

 

1. 리액트의 아이디어

대규모 애플리케이션 중 프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면, 순수 자바스크립트로만 하기에는 다소 골치 아프다.

여러 프레임워크들이 이를 저마다의 관점에서 해결하려고 했고, 이들은 MVC, MVVM, MVW 등과 같은 여러 아키텍쳐들을 제시해왔다. 이들이 공통적으로 가진 것은 모델과 뷰.
모델은 애플리케이션의 데이터를 관리하는 영역이고, 뷰는 데이터를 기반으로 사용자에게 보이는 부분이다.
모델 데이터가 조회/수정되면, 변경 사항이 뷰에 반영되는 식이다.

업데이트하는 항목에 따라 어떤 부분을 찾아서 변경하는 작업은 간단한 듯하지만, 규모가 커지면 상당히 복잡해지면서 제대로 관리하지 못하면 성능이 떨어질 수 있다.

리액트를 개발한 페이스북 개발팀이 고안해낸 아이디어는, 모델에 변경 사항이 생길 때 뷰에 어떤 변화를 줄지 고민하는 것이 아니라, 기존의 뷰를 날려버리고 새로 렌더링하는 것이다. 이렇게 되면 코드 작성이 훨씬 간단해진다.
그러나 여기에는 문제점이 있다. 매번 변화가 생길 때마다 백지에서부터 새로 렌더링을 하는 것은, 업데이트가 이뤄질 때마다 부분부분만 수정하는 것보다 당연히 비용이 많이 든다. CPU 점유율도 올라가고, 메모리도 많이 사용한다. 이는 새로 렌더링할 때마다 끊김 현상을 초래한다.

그러나 이러한 문제점을 해결하고 위의 아이디어를 이룬 것이 리액트이다.

2. 컴포넌트, Virtual DOM, 초기 렌더링과 조화 과정

컴포넌트란, 리액트에서 사용자 인터페이스를 정의하는 단위이다. 다른 프레임워크에서는 이와 비슷한 것으로 템플릿이 있다. 템플릿은 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환한다. 그러나 컴포넌트는 여기서 재사용이 가능한 수많은 API들을 내장하고, 컴포넌트의 생김새와 작동 방식을 정의하는 좀 더 확장된 개념이다.

뷰를 보여주는 것을 렌더링이라고 하는데, 리액트가 상기된 성능 문제를 해결한 방법은 Virtual DOM에 기반하고 있다.
위에서 얘기한 아이디어대로라면, DOM에 업데이트가 발생하면 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 새로 그리는데, DOM의 업데이트가 자주 발생하면 성능이 저하된다. 이 문제를 해결하려면 DOM을 새로 그리는 것이 아니라 조작하는 것이 불가피하고, 이는 결국 아이디어가 제시되기 이전의 원점으로 돌아가게 된다. 그 대신, DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 이를 개선하는데, 이를 위해 Virtual DOM을 사용한다. 
Virtual DOM은 DOM을 추상화한 것으로, 사본이라고 생각하면 된다. 실제 DOM에 접근하거나 수정하거나 실제 DOM을 다시 렌더링하는 대신, Virtual DOM으로 새로 렌더링한다. 그런 다음, DOM 트리와 Virtual DOM 트리를 비교하여 기존의 DOM 트리를 Virtual DOM 트리와 같게 만드는데 필요한 최소한의 연산을 계산하여 기존의 DOM 트리의 수정되어야할 일부만을 리렌더링한다.

컴포넌트를 처음 렌더링할 때를 초기 렌더링이라고 하며, 컴포넌트의 데이터에 변경 사항이 생겨 뷰를 업데이트할 때 리렌더링하는 과정에서 기존의 DOM 트리와 Virtual DOM 트리를 비교하여 최소한의 연산을 계산하는 과정을 조화 과정이라고 한다. 즉, 전체 컴포넌트를 처음부터 다시 렌더링하는 것이 아니라, 업데이트가 필요한 부분만 찾아서 리렌더링해준다.

3. 리액트를 쓰는 이유.

리액트뿐만이 아니라 어느 라이브러리나 프레임워크든, 왜 쓰는지, 그 목적을 정확히 알고 사용해야 올바른 개발자가 될 수 있을 것이다. 결국 초점은 성능에 있고, 리액트 매뉴얼에는 다음 문장이 있다.

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 어플리케이션 구축하기.

글자 그대로, 데이터가 지속적으로 변화할 때 Virtual DOM을 이용한 리렌더링이 효과적인 성능 개선을 발휘할 수 있다. 왜냐하면 리액트는 UI 업데이트 과정의 복잡함을 해소한 업데이트 처리 간결성이 그 장점이기 때문이다.
리액트를 굳이 사용하지 않아도 코드 최적화만으로 성능 개선을 충분히 이루는 게 가능한 앱도 있을 것이고, 단순 라우팅 정도만 있는 정적인 페이지는 오히려 리액트를 사용하지 않는 것이 나은 성능을 보이기도 한다.

4. 리액트는 라이브러리이다.

한편 리액트는 사용자 인터페이스를 구현하는 자바스크립트 라이브러리이다. 그리고 모델과 뷰를 가진 구조에 ajax, 라우팅 기능 등을 내장한 여타 프레임워크와 달리, 오직 뷰만 신경 쓰는 라이브러리이다. (엄연히 프레임워크가 아니다.) 그러므로 기타 기능은 직접 구현해서 써야 한다. 그러나 이미 다른 개발자들이 기타 기능을 위한 라이브러리들을 만들어놓았다. 라우팅에는 리액트 라우터, ajax에는 axios나 fetch, 상태 관리에는 리덕스와 MobX 등이 그렇다. 한편 이러한 점이 리액트로 하여금 다른 프레임워크와 혼용할 수도 있게도 해준다.

 

5. 리액트 프로젝트 개발에는 Node.js가 필요하다.

Node.js는 자바스크립트 런타임으로, 웹 브라우저 이외의 환경에서도 자바스크립트를 실행시켜주는 역할을 하기 때문에 자바스크립트를 웹 서버는 물론, 모바일 어플리케이션, 데스크톱 어플리케이션 등에서도 활약할 수 있게 해주었다.

리액트 애플리케이션은 웹 브라우저에서 실행되므로 사실, Node.js와 직접적인 연관은 없다.
하지만 프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용하므로 Node.js를 설치해야 한다.
이러한 개발 도구들에는 바벨, 웹팩 등이 있다.

Node.js는 모듈을 불러와서 사용하는 기능을 제공한다. 이 기능은 원래 브라우저에는 없던 기능이다.
그래서 모듈을 불러와서 사용하는 방법으로 리액트를 쓸 수 있다. (import React from 'react')

다만 이러한 기능을 사용하려면 js 파일과 불러온 모듈들을 하나의 파일로 묶어서 합쳐주는 작업이 필요하다.
이러한 역할을 해주는 것이 번들러(bundler)이다. 이는 위에 언급한 웹팩이 제공하는 여러 기능들 중 하나이다.
또한 웹팩은 코드를 수정할 때마다 웹 브라우저를 리로딩하는 기능도 제공한다.

 

바벨은 ECMAScript 6를 이를 지원하지 않는 브라우저에서도 실행할 수 있도록 해주는 트랜스파일러다.