React

A JavaScript library for building user interfaces.

— 메타 React 공식 웹사이트 메인 페이지의 역사적인 공식 정체성 한 줄

자기는 한사코 프레임워크가 아닌 단순 '라이브러리'라고 우기지만, 정작 실무에서는 모든 상태 관리와 빌드 생태계까지 좌지우지하는 절대 권력자. ~~그리고 매일 밤 '이 컴포넌트가 대체 왜 무한 렌더링에 빠졌는가'에 대해 고뇌하며 퇴근을 미루게 만드는 주범~~

1. 개요

메타(기업)에서 개발하고 오픈 소스로 배포한 JavaScript UI 라이브러리. 2013년 공개된 이후 기존의 jQuery 중심 웹 개발 흐름을 완전히 끝장내고 SPA(Single Page Application) 시대를 활짝 열었다. 오늘날 프론트엔드 개발자 구인 시장에서는 'React를 쓸 줄 아는가?'가 사실상 지원 자격 요건의 마지노선으로 작동하고 있으며, 프론트엔드 3대장(React, Vue, Angular) 중 가장 거대한 생태계와 커뮤니티 화력을 자랑하고 있다.

2. 핵심 기술적 특징

React의 아키텍처는 레고 블록을 조립하듯이 독립적이고 재사용 가능한 단위인 컴포넌트(Component) 기반으로 구성된다. HTML 코드와 JavaScript 로직을 한 파일에 믹싱하는 JSX(JavaScript XML) 문법을 사용하는데, 처음 접하면 혼란스럽지만 적응되면 이보다 편할 수가 없다. 또한, 브라우저가 화면을 그리는 DOM(Document Object Model)을 직접 수정할 때 발생하는 심각한 연산 병목을 막기 위해 메모리에 가상의 복사본을 올려두는 가상 DOM(Virtual DOM) 기술을 채용했다. 상태가 바뀌면 가상 DOM을 먼저 고치고, 이전 상태와 비교(Diffing)하여 진짜 변한 부분만 실제 브라우저 DOM에 똑똑하게 업데이트(Reconciliation)하는 최적화를 이뤄냈다.¹ 데이터는 부모에서 자식으로만 흐르는 단방향 데이터 흐름(One-way Data Binding)을 강제하여 상태 추적의 직관성을 보장한다.

3. 관련 밈 및 드립

3.1. 저는 프레임워크가 아니라 라이브러리입니다

React 개발진은 끊임없이 React가 단순한 UI 라이브러리일 뿐이라고 주장한다. 틀린 말은 아니다. 라우팅(React Router), 상태 관리(Redux, Zustand), 빌드 도구 등 현대 웹 앱 구성에 필수적인 장치들을 직접 골라서 직접 조립해야 하기 때문이다. 하지만 이 극악무도한 세팅 유연성 덕분에 초보자들은 코딩을 시작하기도 전에 Webpack 설정과 패키지 충돌 단계에서 멘탈이 사정없이 털리기 일쑤며, 결국 메타 공식 문서조차 Next.js 같은 '진짜 프레임워크'를 위에 얹어 쓰는 솔루션을 강하게 권장하는 웃픈 상황이 연출되고 말았다.(...)

3.2. useEffect의 렌더링 지옥과 춘추전국시대

React 개발자들을 유구하게 괴롭혀 온 상태 관리 춘추전국시대와 생명주기 지옥을 뜻한다. 상태가 조금만 복잡해져도 컴포넌트끼리 데이터를 넘겨받는 Props Drilling 현상이 터져 전사적으로 전역 상태 관리 도구(Redux, Zustand, Jotai, Recoil 등)를 가져다 써야 한다. 게다가 부수 효과를 처리하는 useEffect Hook을 잘못 다루면 화면이 깜빡거리며 무한 렌더링 루프에 빠져 CPU를 100% 가동시키는 대참사가 흔하게 터져 나온다. 실무진 사이에서는 '이펙트 훅 안에 빈 배열([]) 채워 넣는 것을 잊어버리는 것만큼 등골 서늘한 실수는 없다'는 자조 섞인 드립이 전설처럼 내려온다.

4. 여담

인스타그램 덕분에 세상에 나왔다: React는 원래 페이스북 내부 뉴스피드의 잦은 상태 변화와 버그를 해결하기 위해 개발되었다. 이후 페이스북이 인스타그램을 인수했을 때 인스타그램의 웹 인터페이스 전체를 React로 새로 개편하면서 시스템의 안정성을 확증했고, 이를 계기로 세상에 완전한 오픈소스로 당당히 공개되었다.
JSX는 필수가 아니다: 많은 사람들이 React를 쓰려면 반드시 JSX 문법을 써야 한다고 생각하지만, 실제로는 React.createElement()라는 순수 자바스크립트 함수 호출의 syntactic sugar일 뿐이다. 다만 JSX를 쓰지 않고 순수 함수로만 React 화면을 짜는 행위는 타이핑 노가다를 유발해 스스로 개발 수명을 갉아먹는 고문이나 다름없다.
16 버전의 혁명, React Fiber: 페이스북은 React의 핵심 렌더링 알고리즘을 16 버전에서 'Fiber'라는 완전히 새로운 엔진으로 재작성했다. 화면 렌더링 연산을 도중에 일시정지했다가 중요한 이벤트(마우스 클릭 등)를 먼저 처리하는 똑똑한 동시성(Concurrency) 제어를 이뤄내며, 자바스크립트 싱글 스레드의 한계를 공학적으로 초월했다는 찬사를 받았다.

5. 관련 문서

실제로 이 가상 DOM 엔진의 혁신 덕분에 개발자들은 브라우저 성능 최적화라는 복잡한 하드웨어 친화적 튜닝 작업을 신경 쓰지 않고, 오직 데이터와 컴포넌트 논리에만 오롯이 집중할 수 있게 되었다. ↩