현재 웹 시장에서는 Angular, React, Backbone, Vue 등 여러 웹 라이브러리/프레임워크가 존재합니다.
하지만 위의 사진에서 볼 수 있듯이 React라는 웹 라이브러리는 여러 웹 프레임워크/라이브러리를 제치고 1등을 차지했습니다. 심지어 위의 기록은 프론트엔드에서 사용되는 것뿐만이 아닌 백엔드에서 사용하는 프레임워크/라이브러리까지 모두 포함한 것입니다. 이처럼 인기 많은 웹 라이브러리인 React는 어떻게 해서 탄생했을까요? 어떤 이유로 페이스북이 React를 개발했는지 알아봅시다.
1. React Application vs No Library Web Application
먼저 우리는 앞장에서 언급했던 웹 프레임워크/라이브러리의 도움 없이 쉽게 웹 사이트를 만들어낼 수 있습니다. 단지 HTML, CSS, Javascript를 사용하면 동적인 웹 사이트를 쉽게 만들 수 있죠. 실제로 다른 웹 프레임워크나 라이브러리 없이 오직 HTML, CSS, Javascript로만 만든 웹 사이트도 쉽게 찾아볼 수 있습니다.
하지만 요즘은 웹 사이트라고 부르지 않고 웹 애플리케이션으로 부릅니다. 그 이유가 뭘까요? 예전에는 단순히 정적인 정보만 보여주는 사이트가 많았습니다. 그때는 웹 사이트라는 이름이 더 잘 어울렸죠. 하지만 지금은 웹상에서 정보를 입력하면 그 정보가 바로바로 업데이트됩니다. 이렇게 유저의 특정 행동에 따라 동적으로 화면을 보여주기 때문에 웹 애플리케이션이라고 부르는 것입니다. 요즘 웹 애플리케이션은 쉽게 동적 인터페이스를 나타내줄 수 있습니다. 하지만 이런 동적 인터페이스에는 수많은 상태 관리가 필요합니다. 아래의 예시를 확인해주세요.
일반 HTML과 Javascript를 사용한다면 직접 Javascript에서 DOM에 접근하여 result라는 id를 가진 엘리먼트를 가져와 number 변수의 값을 넣어줘야 합니다. 만약 프로젝트에 위와 같은 DOM 접근 / 사용자와의 인터렉션이 많지 않다면 아무런 라이브러리를 사용하지 않고서도 충분히 작업이 가능합니다.
하지만 위와 같은 코드가 엄청나게 많아진다면 어떻게 해야 할까요?
또, 이와 비슷한 코드가 여럿 있을 때에는 그때마다 다른 함수를 만들어줘야 할까요?
물론 엄격하게 규칙을 정하거나 기능별로 파일을 분류한다면 불가능한 방법은 아닙니다. 하지만 수천 줄의 코드 또는 수백 개의 파일을 작성하는 것도, 유지 보수하는 것도 매우 힘든 일이 될 것입니다. 하지만 React와 같은 웹 라이브러리를 사용하면 DOM 관리와 같은 불편함을 최소화시켜줄 뿐만 아니라 코드를 더 간결하게 해줍니다.
2. Facebook은 왜 React를 개발했을까?
리액트 공식 블로그의 "Why did we build React?"라는 제목의 글에 핵심적인 힌트가 숨어있습니다. 그 문장은 아마 해당 페이지에 들어가 보면 바로 볼 수 있을 텐데, 그 문장은 아래와 같습니다.
It encourages the creation of resuable UI components which present data that changes over time.
먼저 페이스북 사이트의 특징 먼저 알아봅시다.
페이스북의 핵심은 수많은 타임라인입니다. 이 타임라인에는 또 수많은 요소가 들어갑니다. 사진, 글, 좋아요 버튼, 댓글 버튼 등 말이죠. 만약 웹 라이브러리의 도움 없이 오로지 HTML, CSS, Javascript로 이 모든 것들을 작업한다면 수많은 인터랙션 관리를 위해 수천 줄의 코드를 작성해야 할 수도 있습니다. 하지만 React는 위의 문장에서 볼 수 있듯이 재사용 가능한 UI 컴포넌트의 사용을 장려한다고 합니다. 여기서 UI 컴포넌트란 뒤에서 배울 테지만 지금은 먼저 타임라인 같은 것들이 컴포넌트가 될 수 있다고 생각하시면 될 것 같습니다. 이렇게 React를 통해 반복되는 수많은 타임라인을 간결하게 정리를 할 수 있다는 것이죠. 코드를 재사용함으로써 기존보다 코드량을 훨씬 줄일 수 있고, 그만큼 유지보수도 쉬워집니다.
그리고 페이스북은 실시간으로 변화하는 데이터를 바로바로 출력합니다. 우리가 좋아요 버튼을 누르면 그 버튼이 빨간 배경색이 칠해지는 것처럼 말이죠. 만약 React를 사용하지 않았다면 몇몇 인터렉션이 발생할 때마다 API를 이용해 프론트 부분인 View를 다시 갱신해줘야 합니다. 하지만 관리해야 할 요소가 많아짐에 따라 관리를 해주는 로직을 작성하는 것도 엄청 힘든 일이며 유지보수는 말도 안 되게 고된 일로 변하게 될 것입니다. 하지만 React는 뒤에서 곧 서술할 것이지만 Virtual DOM을 사용합니다. 화면을 다시 렌더링해주기 전에 미리 Virtual DOM에 Elements를 넣고 기존의 DOM과의 비교를 통해 바뀐 부분만 다시 렌더링해주는 거죠. 이렇게 함으로써 React는 비효율적인 DOM 조작을 줄임으로써 브라우저 내에서 발생하는 연산의 양을 줄여 성능을 개선하는 것입니다.
