React란?
React는 간결하게 말하면 'UI 컴포넌트 라이브러리' 이다.
React UI 컴포넌트는 템플릿 언어가 아닌 '자바스크립트'를 이용해 만든다.
여러 컴포넌트로 UI를 구성하는 방식이 React의 핵심 철학이다!
React UI 컴포넌트는 매우 독립적이고 특정 관심사에 집중된 기능 블록이다.
시각적 표현과 동작을 구현하는 논리를 담기도 하고, 서버와 직접 통신하기도 한다.
물론, 컴포넌트 기반 아키텍처(CBA)는 React 외에도 존재했다.
CBA는 일반적으로 일체형 UI에 비해 재사용과 유지보수, 확장에 용이하다.
이렇듯 React는 순수한 자바스크립트를 기반으로 CBA를 구현했고, 이는 컴포넌트 구성에 대한 새로운 시각을 창출해냈다는 평가를 받고 있다.
React가 해결하고자 하는 문제
React 개발 이전에는 복잡한 웹UI로 구성된 프론트엔드 애플리케이션을 개발하고 관리하는데 어려움을 겪고 있었다고 한다. 그리고 React는 이런 문제를 해결하기 위해 시작되었고 탄생했다. 거대한 웹 애플리케이션의 경우, 개발할 때 데이터가 변경될 때마다 뷰를 직접 변경하고 관리하는 것은 고된 작업이다. 이에 대해서 React 공식 사이트는 이렇게 말한다.
"우리는 한 가지 문제를 해결하기 위해 React를 만들었습니다. 우리가 해결하고자 한 문제는 시간에 따라 변화하는 데이터를 다루는 거대한 애플리케이션의 개발입니다."
탄생 과정의 일부를 한번 살펴보면,
React를 만든 '조던 워크'는 백엔드에서 비동기적으로 여러 데이트를 가져와 입력 자동완성을 만들고자 했다. 하지만 개발을 진행하면서 새로운 행을 추가할 지점을 정해 DOM요소를 재사용하는 것이 복잡했다고 한다. 결국 DOM요소를 매번 새롭게 생성하기로 결정한다. 바로 UI를 함수로 만든 것이다. 여기에 데이터를 전달하고 호출하여 뷰를 렌더링하여 뷰를 예측할 수 있었다.
하지만 여기서 메모리에서 DOM요소를 생성하는 것은 빠르지만, 실제 DOM으로 렌더링하는 과정에서 병목이 발생한다는 점을 발견했다고 한다. 바로 이를 피하기 위한 알고리즘을 만들었고, 이 덕분에 React의 속도를 높이고 성능면에서도 훨씬 나아졌다. 이렇듯 React가 성공한 요인은 훌륭한 성능과 개발자 친화적이며 컴포넌트를 기반으로 한 구조라고 하나를 꼽을 수 있다.
그리고 실제로 많은 기업들이 React로 개발되었고, 하고있다.
