리액트는 자바스트립트 라이브러리입니다. 리액트 코드를 작성하면 컴포넌트(component)를 만들게 되는데, 컴포넌트는 HTML을 만드는 자바스크립트 함수의 집합입니다(즉, 자바스크립트 파일은 궁극적으로 HTML로 변환되는 것입니다). 리액트 코드를 통해 여러개의 다른 컴포넌트를 작성하면 각 컴포넌트들을 다른 방식으로 배치하면서 복잡한 어플리케이션을 보다 간단하게 만들 수 있습니다. 조금 더 상세하게 설명하면, 리액트는 React와 ReactDom이라는 라이브러리로 이루어져 있습니다. React는 컴포넌트를 생성하고 관리하는 라이브러리인 반면, ReactDom은 React 컴포넌트를 DOM에 렌더링하는 라이브러리입니다. 또한 컴포넌트를 DOM에 렌더링하기 위해서는 그 전에 컴포넌트를 인스턴스화 해야 합니다.
한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가 영역을 확장하여 서버사이드는 물론 모바일, 데스크톱 애플리케이션에서도 활용되고 있습니다. 예를 들어 슬랙(slack), 아톰(atom) 등 데스크톱 애플리케이션은 자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 프레임워크인 일렉트론(electron)으로 만들어졌습니다. 모바일 애플리케이션도 마찬가지입니다. 자바스크립트로 크로스 플랫폼 애플리케이션을 개발할 수 있는 여러 프레임워크(Ionic, Titanium, NativeScript, React Native 등)를 사용하여 페이스북(facebook), 페이팔(paypal), 이베이(ebay) 등 수많은 유명 애플리케션이 만들어졌습니다.
33가지 자바스크립트 필수 개념
리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용됩니다. 구조가 MVC(Model-View-Controller), MVW(Model-View-Whatever) 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리입니다.
리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 합니다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념입니다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념입니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다.
리액트 라이브러리에서 중요한 부분인 업데이트는 "업데이트 과정을 거친다"라고 하기보다는 "조화 과정(reconciliation)을 거친다"라고 하는 것이 더 정확한 표현입니다. 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문입니다. 이 작업 또한 render 함수가 맡아서 합니다. render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지 객체를 반환합니다. 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다. 그러면 그 데이터를 지닌 뷰가 생성되게 됩니다. 하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM(Document Object Model)에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다. 자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 하게 됩니다.
DOM 자체는 자바스크립트 엔진의 성능과 비교하여 다르지 않습니다. 다만 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하게되는데, 이 과정에서 시간이 허비되는 것입니다. 따라서 리액트는 Virtual DOM을 사용하여 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟습니다.