왜 그 당시, 우리는 리액트에 열광했을까?

지난 글에서 프론트엔드 생태계의 거대한 흐름을 회고해 보았다면, 이번에는 그 중심에 있었던 리액트(React)를 다시금 톺아보고자 한다. Vue나 Angular 같은 쟁쟁한 경쟁자들 사이에서 리액트가 독보적인 선택을 받았던 이유는 무엇일까?

DOM과 상태의 동기화: 새로운 패러다임의 제시

과거 바닐라 자바스크립트나 jQuery 중심의 개발 환경에서는 상태가 변할 때마다 해당 상태와 연결된 DOM을 수동으로 동기화해야 했다. 명령형 프로그래밍 방식은 서비스가 커질수록 로직이 어디서 어떻게 실행되는지 추적하기 어렵게 만들었다.

리액트는 여기서 "매 렌더링마다 UI 전체를 다시 그리자"라는 파격적인 방향을 제시했다. 내부적으로 Virtual DOM을 활용해 실제 변경된 부분만 효율적으로 반영하는 구조를 갖췄고, 특히 선언적 방식의 JSX는 상태와 UI의 관계를 직관적으로 이해하는 데 압도적인 경험을 제공했다.

그 당시 Vue 2는 객체 지향적인 Getter/Setter 방식을 사용하며 Virtual DOM 없이 변경 사항을 직접 반영해 성능 면에서는 더 우수하기도 했다. 하지만 데이터를 정적으로 미리 정의해야 하거나, 동적으로 추가되는 속성에 대해 별도의 처리가 필요한 점 등 제약 사항이 있었다.

반면 리액트는 JavaScript 그 자체에 가까운 자유도를 유지하면서도 상태 동기화를 보장했고, 그 과정에서의 성능 타협은 개발 생산성과 사용성을 고려했을 때 충분히 수용할 만한 수준이었다.

JavaScript 친화적 구조와 정적 분석의 시너지

리액트는 프레임워크 고유의 문법보다 표준 JavaScript 문법을 적극 활용했다. 덕분에 JavaScript에 익숙한 개발자가 진입하기 좋았고, 이는 TypeScript로의 전환기에도 엄청난 강점이 되었다. 'JavaScript의 확장'에 가까운 리액트의 특성은 정적 분석 트렌드와 자연스럽게 맞물리며 생태계를 폭발적으로 확장시켰다.

단순명쾌한 데이터 흐름(Props/State 변경 → 렌더링 → Virtual DOM 비교 → 실제 DOM 반영)을 기반으로 리액트는 빠르게 문제점들을 돌파하며 세대교체를 이끌었다.

• Class Component: this, HOC, Render Props의 시대
• Functional Component: Hooks, useEffect, 그리고 TypeScript와의 조화
• 미래: Concurrent Features, Server Components, 그리고 React Compiler까지

생태계와 채용 시장의 선순환

또한, 이때 중요한 시점에 개발자 붐과 함께 많은 사람들이 유입되면서, 개발 교육 시장도 React를 우선적으로 가르치게 되었고 React를 사용하는게 채용시장에서 인력을 구하는게 더 유리하게 되었다. 현재 회사의 경우 이전에 얼랭(Erlang) 개발자를 구하느라 애먹었던 경험을 돌이켜 보면, 회사 입장에서는 보편적인 스택을 무시할 수 없을 것이다.

위와 같은 요소로 더욱 React의 파이는 커져갔고, 덕분에 생태계도 너무나도 커져서 활용할 수 있는 라이브러리들도 많아서 개발 생산성에 대한 요소도 무시할 수 없었을 것이다.
지금은 AI가 있으니, 희소성 있는 스택이라도 AI로 자체 라이브러리를 만든다거나, 선택이 가능할 것 같기도 하다.

리액트 다시 이해해보기

리액트가 나온 시점에서, 어느 정도 리액트에 대해서 공부하고 이해하고 있었던 것 같은데, 많은 것들이 변했고 리액트를 다시한번 돌아보면 좋을 것 같았다.

Rodrigo Pombo라는 분의 Build your own React라는 글이 있다. 해당 자료는 리액트의 기본적인 기능들을 만들면서 이해해보는 아주 좋은 글이다.

대략적으로 요약하자면,

리액트가 제일 잘 돌파한 선언적 프로그래밍 방식을 구현할 수 있었던 부분을 바벨을 활용한 컴파일 부분으로 잘 설명하고 있다.

컴파일된 함수가 어떻게 객체를 구조화하여 Fiber Tree로 만드는지 그리고 해당 구조를 어떻게 DOM에 반영하는지 아주 잘 설명하고 있다.

React의 렌더링 블로킹 문제를 해결하기 위한 동시성 모드(Concurrent Mode)을 잘 설명하고 있다.

그 외에 각 변경, 삭제에 대해서 어떻게 처리하고 있는지, 함수형 컴포넌트, hook에 대해서도 설명하고 있다.

읽어보면, 원문 좌측에 코드가 스크롤에 따라서 예제가 변하도록 구현하셔서 아주 이해하기 좋다!

직접 만들며 배우는 나만의 리액트 (Build your own React 번역 + 실습)

좋은 글에서 멈추지 않고, 일부 번역 및 실제 구동 가능한 실습을 포함한 프로젝트를 만들었다.

• learn-react-by-building-ko

기본적으로 babel을 활용하여, 실습으로 만들어보는 리액트를 직접 컴파일하고 html에 컴파일된 js가 연결되어 live 서버를 구동하여 직접 브라우저에서 확인해 볼 수 있도록 하였다.

각 과정마다 실제로 원문에서의 내용이 동작하는지 확인하며 실습 구조를 만들었다.