React 이해하기
싱글 페이지 애플리케이션(SPA)
기존의 웹 앱은 대부분 멀티 페이지 애플리케이션(Multiple Page Application, MPA) 방식으로 개발되었기 때문에 하나의 애플리케이션이 여러 개의 웹 페이지로 구성되어 있습니다. MPA 방식의 웹 앱에서는 클라이언트(웹 브라우저)가 새로운 페이지를 요청할 때마다 서버로부터 정적 리소스(static resource)를 내려받아 매번 전체 페이지를 리렌더링(re-rendering) 하게 됩니다.
이와 달리 SPA 방식의 웹 앱은 단 한 개의 페이지만으로 구성됩니다. SPA 방식의 웹 앱에서는 애플리케이션에 필요한 모든 정적 리소스를 최초 단 한 번만 다운로드하여 렌더링하고, 이후 새로운 페이지에 대한 요청이 있을 때에는 페이지 갱신에 필요한 데이터만을 내려받아 리렌더링 합니다.
앞서 설명한 것처럼 MPA 방식의 웹 앱은 새로운 페이지를 요청할 때마다 전체 페이지를 리렌더링하기 때문에 페이지를 요청할 때마다 리로딩(reloading, 새로고침)이 발생하게 됩니다. 하지만 SPA 방식의 웹 앱에서는 페이지에서 필요한 부분만을 따로 내려받아 페이지를 리렌더링 하기 때문에 리로딩이 발생하지 않습니다.
1) 최초 단 한 번에 모든 정적 리소스를 내려받기 때문에 초기 구동 속도가 느립니다.
2) 페이지가 동적으로 갱신되기 때문에 검색엔진 최적화(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를 컴포넌트라는 개별적인 여러 개의 코드 모음으로 나누어 관리함으로써 재사용성과 유지보수가 쉽도록 하였습니다.
라이브러리? 프레임워크?
앞서 우리는 React가 UI를 만들기 위해 사용되는 자바스크립트 라이브러리이며, Angular, Vue.js와 함께 대표적인 웹 프론트엔드 프레임워크의 하나로 자리매김하고 있다고 하였습니다. 하지만 정확히 말하자면 React는 자바스크립트 라이브러리(library)이며, Angular와 Vue.js는 자바스크립트 프레임워크(framework)입니다. 이러한 라이브러리와 프레임워크의 차이점에 대해 한 번 살펴보도록 합시다.
라이브러리(library)는 애플리케이션을 개발할 때 단순 활용이 가능한 도구(기능)들의 집합이라 할 수 있습니다. 자주 사용되는 기능들을 객체나 함수 등의 라이브러리 형태로 만들어 놓으면 나중에 필요할 때마다 해당 기능을 호출하여 사용할 수 있습니다.
프레임워크(framework)는 개발자가 원하는 기능 구현에만 집중할 수 있도록 필요한 기본 구조와 구성을 모두 포함하고 있는 일종의 틀(뼈대)이라고 할 수 있습니다. 즉, 개발에 필요한 데이터 모델링, 메모리 관리 등 공통된 부분은 프레임워크가 관리하고, 개발자는 프레임워크가 정해준 방식대로 필요한 기능들을 구현해 나가기만 하면 됩니다.
단순히 “그럼 프레임워크 안에 라이브러리가 포함되는 관계구나!”라고만 이해하기 쉬운데, 라이브러리와 프레임워크의 가장 중요한 차이점은 바로 애플리케이션의 제어 흐름(control flow)을 누가 가지고 있는가 입니다.
프레임워크에서는 애플리케이션의 제어 흐름을 프레임워크 자신이 가지고 있으며, 개발자는 수동적으로 프레임워크가 짜 놓은 구성 안에서 자신이 필요한 코드만을 작성하게 됩니다. 반면 라이브러리에서는 개발자가 애플리케이션의 흐름을 직접 제어하면서 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하게 됩니다.
따라서 Angular와 Vue.js와 같은 웹 프레임워크에는 웹 개발에 필요한 라우터(router), 상태 관리 도구 등 다양한 도구들이 미리 포함되어 있습니다. 하지만 React는 사용자 View와 관련된 기능만을 제공하므로, 다른 기능들은 개발자가 직접 개발하거나 해당 기능을 제공하는 다른 라이브러리를 함께 사용해야 합니다.
하지만 이것은 곧 React를 손쉽게 다른 웹 프레임워크나 라이브러리와 함께 사용할 수 있다는 의미도 되며, 이는 기존에 구축된 애플리케이션에 React를 점진적으로 도입하는 것이 수월하다는 의미입니다.
