React

React는 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리입니다.

React는 싱글 페이지 애플리케이션(Single Page Application, SPA) 개발에 주로 사용되며, Virtual DOM과 JSX라는 개념을 사용하여 동작합니다.

또한, 컴포넌트(Component)라고 불리는 작은 코드 모음을 활용하여 복잡한 UI를 손쉽게 구성할 수 있습니다.

싱글 페이지 애플리케이션(SPA)

기존의 웹 앱은 대부분 멀티 페이지 애플리케이션(Multiple Page Application, MPA) 방식으로 개발되었기 때문에 하나의 애플리케이션이 여러 개의 웹페이지로 구성되어 있습니다.

MPA 방식의 웹 앱에서는 클라이언트가 새로운 페이지를 요청할 때마다 서버로부터 정적 리소스(static resource)를 내려받아 매번 전체 페이지를 리렌더링(re-rendering)하게 됩니다.

이와 달리 SPA 방식의 웹 앱은 단 한 개의 페이지만으로 구성됩니다. SPA 방식의 웹 앱에서는 애플리케이션에 필요한 모든 정적 리소스를 최초 단 한 번만 다운로드하여 렌더링하고 이후 새로운 페이지에 대한 요청이 있을 때에는 페이지 갱신에 필요한 데이터만들 내려받아 리렌더링 합니다.

• MPA 방식
  새로운 페이지를 요청할 때마다 전체 페이지를 리렌더링 하기 때문에 페이지를 요청할 때마다 리로딩(새로고침)이 발생
• SPA 방식
  페이지에서 필요한 부분만을 따로 내려받아 페이지를 리렌더링 하기 때문에 리로딩(새로고침)이 발생하지 않음

다만 SPA 방식의 웹 앱도 장점뿐이 아닌 아래와 같은 단점들이 명확히 존재합니다.

• 최초 단 한 번에 모든 정적 리소스를 내려받기 때문에 초기 구동 속도가 느립니다.
• 페이지가 동적으로 갱신되기 때문에 검색엔진 최적화(SEO)가 매우 어렵습니다.

React의 존재 이유

SPA 방식의 웹 앱은 대부분 클라이언트 측 렌더링(Client-Side Rendering, CSR) 방식 즉, 클라이언트 환경에서 자바스크립트를 사용하여 동적으로 View를 리렌더링 합니다.

이렇게 동적으로 View를 리렌더링 할 때 어떻게 하면 업데이트가 필요한 DOM 요소를 좀 더 쉽게 찾을 수 있고, 업데이트 작업을 보다 효율적이고 간편하게 진행할 수 있을까를 고민하는 과정에서 Angular, Ember.js, Backbone.js 등 다양한 자바스크립트 프레임워크들이 개발되었습니다.

하지만 다른 프레임워크들과는 달리 React는 오로지 어떻게 하면 사용자에게 View를 효율적으로 보여줄 수 있을까 라는 고민으로부터 시작되었습니다. 페이스북의 소프트웨어 엔지니어였던 Jordan Walke는 Model의 데이터가 변할 때마다 어떤 방식으로 View를 갱신할지 고민하는 것보다 그냥 새로운 View를 만들어 대체하면 어떨까 라고 생각했고, 이러한 아이디어를 바탕으로 개발된 것이 바로 React입니다.

React의 핵심 요소

사실 View를 갱신하지 않고 새로운 View를 만들어 대체한다는 아이디어를 실제 DOM에 그대로 적용한다면, 해당 웹 앱의 동작 속도는 아주 느려질 것입니다. 웹 브라우저는 우리가 생각하는만큼 빠르게 동작하지 않기 때문입니다.

하지만 React는 Virtual DOM이라는 새로운 개념을 활용하여 View에서 변경되어야 할 부분만을 효율적으로 업데이트 할 수 있도록 고안되었습니다. 또한, 자바스크립트 문법을 확장한 JSX라는 문법을 사용함으로써 불필요한 코드를 줄여 개발 생산성을 높였습니다. 그리고 UI를 컴포넌트라는 개별적인 여러 개의 코드 모음으로 나누어 관리함으로써 재사용성과 유지보수가 쉽도록 하였습니다.

Virtual DOM

문서 객체 모델(DOM)

React에서 사용하는 Virtual DOM에 대해 알아보기 전에 DOM에 대해 간단히 알아보겠습니다.

문서 객체 모델(Document Object Model, DOM)은 HTML이나 XML 문서의 구조화된 표현으로 문서 내의 모든 요소를 정의할 뿐만 아니라 각각의 요소에 접근하는 방법(인터페이스)도 같이 제공합니다. DOM은 노드와 객체로 문서를 표현하며 자바스크립트와 같은 스크립팅 언어를 사용하여 수정할 수 있습니다.

Virtual DOM

기존 방식에서는 View에 표시할 데이터가 변경되었을 때 갱신이 필요한 DOM 요소들을 직접 찾아 조작함으로써 업데이트를 진행했습니다. 하지만 React에서는 Virtual DOM이라는 새로운 개념을 도입함으로써 View에서 변경되어야 할 부분을 효율적으로 찾아 업데이트 할 수 있습니다.

Virtual DOM은 실제 존재하는 DOM이 아닌 메모리 상에서만 존재하는 가상의 DOM입니다. React는 상태(state)가 업데이트 되면 우선 변경 사항이 모두 적용된 전체 UI를 새로운 Virtual DOM에 렌더링합니다. 그리고 이전 버전의 Virtual DOM과 새로 생성된 Virtual DOM을 서로 비교하여 차이점이 있는 부분만을 실제 Browser DOM에 적용하게 됩니다.

이를 통해 어떤 방식으로 View를 갱신해야 할지를 고민하지 않으면서도 성능을 크게 향상시킬 수 있습니다.

다만 Virtual DOM을 사용한다고 해서 언제나 성능이 향상되는 것은 아닙니다. 데이터가 지속적으로 변화하는 동적인 애플리케이션에서는 Virtual DOM을 사용했을 때 성능 향상이 큰 편이지만, 데이터가 자주 변경되지 않는 정적인 애플리케이션에서는 오히려 성능이 느려질 수도 있습니다.

이외에 React의 핵심 요소들인 JSX와 컴포넌트는 추후에 알아보겠습니다.

라이브러리 vs 프레임워크

React는 UI를 만들기 위해 사용되는 자바스크립트 라이브러리이며, Angular, Vue.js와 함께 대표적인 웹 프론트엔드 프레임워크의 하나로 자리매김하고 있습니다.

하지만 정확히 말하면 React는 자바스크립트 라이브러리이고, Angular와 Vue.js는 자바스크립트 프레임워크입니다. 이러한 라이브러리와 프레임워크의 차이점에 대해 간단히 알아보겠습니다.

라이브러리는 애플리케이션을 개발할 때 단순 활용이 가능한 도구(기능)들의 집합이라 할 수 있습니다. 자주 사용되는 기능들을 객체나 함수 등의 라이브러리 형태로 만들어 놓으면 나중에 필요할 때마다 해당 기능을 호출하여 사용할 수 있습니다.

프레임워크는 개발자가 원하는 기능 구현에만 집중할 수 있도록 필요한 기본 구조와 구성을 모두 포함하고 있는 일종의 틀(뼈대)이라고 할 수 있습니다. 즉, 개발에 필요한 데이터 모델링, 메모리 관리 등 공통된 부분은 프레임워크가 관리하고, 개발자는 프레임워크가 정해준 방식대로 필요한 기능들을 구현해 나가기만 하면 됩니다.

가장 중요한 차이점은 애플리케이션의 제어 흐름을 누가 가지고 있는가이다.

프레임워크에서는 애플리케이션의 제어 흐름을 프레임워크 자신이 가지고 있으며, 개발자는 수동적으로 프레임워크가 짜 놓은 구성 안에서 자신이 필요한 코드만을 작성하게 됩니다. 반면 라이브러리에서는 개발자가 애플리케이션의 흐름을 직접 제어하면서 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하게 됩니다.

따라서 Angular와 Vue.js와 같은 웹 프레임워크에는 웹 개발에 필요한 라우터(router), 상태 관리 도구 등 다양한 도구들이 미리 포함되어 있습니다. 하지만 React는 사용자 View와 관련된 기능만을 제공하므로, 다른 기능들은 개발자가 직접 개발하거나 해당 기능을 제공하는 다른 라이브러리를 함께 사용해야 합니다.

하지만 이것은 곧 React를 손쉽게 다른 웹 프레임워크나 라이브러리와 함께 사용할 수 있다는 의미도 되며, 이는 기존에 구축된 애플리케이션에 React를 점진적으로 도입하는 것이 수월하다는 의미입니다.