처음 웹 개발을 시작했던 2000년대 초반이 생각난다. 당시 웹 개발은 Perl이나 PHP 같은 서버 측 언어에 간단한 HTML을 사용하는 것이 전부였다. 프론트엔드 코드를 alert()로 디버깅하던 좋은 시절 말이다. 그렇지만 인터넷이 진화하면서 웹 사이트 개발은 놀라울 정도로 복잡해졌다. 단순하던 웹 사이트가 웹 애플리케이션으로 발전하면서 복잡한 사용자 인터페이스와 비즈니스 로직을 갖추게 되었고, 데이터 계층이 실시간으로 변경되는 모습도 흔한 풍경이 되었다.

복잡한 사용자 인터페이스(UI)를 만들기 위해 여러 가지 자바스크립트 템플릿 라이브러리가 등장했다. 이 라이브러리들은 옛날 방식의 관심사 분리에 초점이 맞춰져 있었다. 즉, CSS, HTML, 자바스크립트를 각각 스타일, 데이터 추상화, 동적 인터랙션으로 구분하여 생각하는 방식이다. 이런 시선은 요즘의 요구사항에는 들어맞지 않는다(DHTML이라는 말을 기억하고 있을지 모르겠다).

이와 다르게 React는 효율적인 프론트엔드 개발을 위한 새로운 방법을 제시했다. React는 강력한 UI 라이브러리다. 페이스북, 넷플릭스, 에어비앤비 같은 유명 기업들도 React를 기반으로 성공을 거두었다. 과거처럼 템플릿 언어를 이용하는 방식으로는 UI를 재사용하기가 쉽지 않다. 그러나 자바스크립트로 만든 React 컴포넌트는 웹 사이트 어디서든 UI를 재사용할 수 있다.

캡차(captcha)나 날짜선택기(date picker)가 필요한가? React로 <Captcha/>나 <DatePicker/> 컴포넌트를 정의해서 폼에 추가한다고 생각해보자. 모든 기능은 물론 백엔드에 대한 비즈니스 로직까지 갖춘 컴포넌트를 간단히 추가할 수 있을 것이다. 사용자가 네 글자 이상 입력했을 때부터 데이터베이스와 비동기로 통신하는 자동완성 입력 상자가 필요한가? <Autocomplete charNum="4"/> 컴포넌트를 이용한다고 생각해보자. 텍스트박스 UI를 사용하거나 다른 특정 폼 요소를 선택할 수도 있다. <Autocomplete textbox="..."/> 같은 방식일 것이다.

React의 접근법이 완전히 새로운 것은 아니다. 컴포넌트로 UI를 구성하는 방법을 사용한 지는 오래되었지만, React는 최초로 템플릿 없이 순수하게 자바스크립트만으로 이것을 가능하게 했다. 그리고 이 방법이 유지보수와 재사용, 확장에 좀 더 용이하다는 사실도 입증했다.

React는 대단한 UI 라이브러리이자 프론트엔드 개발을 위한 중요한 도구로, 반드시 알아두어야 한다. 그렇지만 React가 웹 프론트엔드 개발의 완벽한 해결책이라고 볼 수는 없다. 1장에서는 여러분의 애플리케이션에 React를 적용할 때의 장점과 단점에 대해서 살펴볼 것이다. 또한, 어떻게 하면 기존의 웹 개발 스택에 적용할 수 있는지도 살펴보겠다.

1부에서는 React의 기본적인 개념과 기능을 다룬다. 2부에서는 좀 더 복잡한 프론트엔드 앱을 개발하기 위해 사용하는 React의 친구들을 살펴볼 것이다. 새롭게 개발을 시작해서 레거시 코드가 없는 환경은 물론 레거시 코드와 시스템을 다뤄야 하는 환경¹에 대해서도 두루 살펴볼 것이므로 실무에서 어떻게 적용할 수 있는지에 대한 아이디어도 얻을 수 있을 것이다.