React처럼 쓰지만 런타임은 걷어낸다 — 컴파일 프레임워크 Octane의 도전

프론트엔드 개발을 하다 보면 한 번쯤 이런 생각이 들어요. "React의 개발 경험은 정말 좋은데, 성능 최적화는 왜 이렇게 손이 많이 가지?" 최근 이 고민에 정면으로 도전하는 새 프레임워크가 등장했는데요, 이름은 Octane이에요. 슬로건이 인상적이거든요. "React의 프로그래밍 모델을, 컴파일한다(React's programming model, compiled)". 딱 한 줄인데, 프론트엔드 업계가 몇 년째 씨름해 온 문제의식이 그대로 담겨 있어요.

React가 치르는 대가: 런타임 비용

배경부터 짚고 갈게요. React의 가장 큰 매력은 "상태가 바뀌면 화면을 다시 그린다"는 단순한 멘탈 모델이에요. 개발자는 상태만 신경 쓰면 되고, 실제 DOM(브라우저가 화면을 그릴 때 쓰는 문서 구조)을 어떻게 고칠지는 React가 알아서 처리해 주죠. 이때 쓰는 도구가 가상 DOM(Virtual DOM)인데요. 이게 뭐냐면, 실제 화면의 복사본을 메모리에 만들어 두고, 상태가 바뀔 때마다 새 복사본과 이전 복사본을 비교해서 달라진 부분만 진짜 화면에 반영하는 방식이에요.

편리하지만 공짜는 아니에요. 상태가 바뀔 때마다 컴포넌트 함수가 통째로 다시 실행되고, 비교 연산도 매번 돌아가거든요. 그래서 useMemo, useCallback, React.memo 같은 최적화 도구를 개발자가 일일이 붙여야 했고, 이걸 잘못 쓰면 오히려 버그가 나는 일도 흔했죠.

컴파일 접근은 발상이 달라요. "어떤 상태가 화면의 어느 부분에 영향을 주는지는 코드만 봐도 알 수 있잖아? 그럼 빌드할 때 미리 분석해 두자"는 거예요. 미리 연결 관계를 파악해 두면, 런타임에 전체를 비교할 필요 없이 바뀐 상태와 연결된 DOM 조각만 콕 집어 수정하면 되거든요. Svelte가 이 방식으로 유명해졌고, SolidJS는 시그널(signal)이라는 세밀한 반응성 시스템으로 비슷한 효과를 냈어요. Octane이 내세우는 지점은 여기서 한 발 더 나가는데요. Svelte나 Solid는 결국 새로운 문법과 멘탈 모델을 배워야 하지만, Octane은 컴포넌트, 훅, JSX라는 React의 프로그래밍 모델은 그대로 두고 그 아래에서 돌아가는 런타임만 컴파일러로 대체하겠다는 거예요. 개발자 입장에서는 익숙하게 쓰던 방식 그대로 쓰는데, 결과물은 가상 DOM 없이 동작하는 코드가 나오는 그림이죠.

React Compiler와는 뭐가 다를까

"어? 그거 React Compiler가 하는 일 아니야?" 싶으실 텐데요, 방향이 좀 달라요. React 팀이 만든 React Compiler는 개발자가 수동으로 하던 메모이제이션(한 번 계산한 결과를 기억해 뒀다가 재활용하는 것)을 자동으로 넣어 주는 도구예요. 분명 큰 발전이지만, 가상 DOM과 재조정(reconciliation) 과정 자체는 그대로 남아 있어요. 반면 Octane 같은 시도는 그 런타임 구조 자체를 걷어내는 쪽이고요. 비슷한 계보로는 React 컴포넌트를 세밀한 DOM 업데이트로 바꿔 주던 Million.js가 있었고, Svelte 5는 runes라는 시그널 기반 문법으로 넘어가면서 "컴파일러 + 시그널" 조합을 사실상 표준 방향으로 만들었어요. 큰 흐름을 보면 업계 전체가 "개발 경험은 React처럼, 실행은 시그널처럼"으로 수렴하는 중이고, Octane은 그 수렴 지점을 정면으로 노린 프로젝트인 셈이에요.

한국 개발자에게 주는 시사점

갓 나온 프레임워크를 프로덕션에 바로 도입하는 건 당연히 무리예요. 생태계 성숙도, 기존 라이브러리 호환성, 커뮤니티 검증이 다 필요하니까요. 하지만 이 흐름 자체는 지금 알아 둘 가치가 충분해요. 첫째, React Compiler가 이미 실전 투입 단계에 들어섰기 때문에 "컴파일러가 최적화를 대신해 주는 시대"는 기존 React 프로젝트에도 곧 현실이 돼요. useMemo를 언제 걷어낼 수 있는지 지금부터 감을 잡아 두면 좋고요. 둘째, 가상 DOM vs 시그널 vs 컴파일이라는 구도는 면접이나 아키텍처 논의에서 단골 주제가 됐거든요. 각 방식의 트레이드오프를 자기 언어로 설명할 수 있으면 프론트엔드 이해도가 한 단계 올라가요.

한 줄 정리: React의 편한 개발 방식은 그대로 두고 런타임 비용을 빌드 타임으로 옮기려는 시도가 계속되고 있고, Octane은 그 최신 주자예요.

여러분은 어느 쪽에 걸으시겠어요? React 생태계 안에서 React Compiler가 진화하는 것이 답일까요, 아니면 Octane 같은 신생 프레임워크가 판을 바꿀 수 있을까요?