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 조작을 줄임으로써 브라우저 내에서 발생하는 연산의 양을 줄여 성능을 개선하는 것입니다.