Octane - React 프로그래밍 모델을 직접 DOM 코드로 컴파일하는 UI 프레임워크

1 day ago 11

React처럼 컴포넌트와 Hooks로 화면을 작성하되, 가상 DOM 없이 직접 DOM을 갱신하는 코드로 컴파일하는 JavaScript UI 프레임워크
Inferno를 만든 Dominic Gannaway가 개발하는 Inferno의 후속 프로젝트
useState, useEffect, Context, Portal, Suspense, Transition 등 익숙한 React API를 제공하지만 일부 동작에는 차이가 있음
컴포넌트는 React처럼 다시 실행되며, 컴파일된 DOM 갱신 코드와 키 기반 목록 비교로 런타임 부담을 줄임
useEffect, useMemo, useCallback 등의 의존성 배열은 컴파일러가 자동으로 추론하며, 직접 지정할 수도 있음
Hook을 호출 순서가 아닌 코드상의 호출 위치로 구분해 조건문 안이나 조기 반환 뒤에서도 사용 가능
- 일반 JavaScript 반복문 안의 상태 Hook은 제한되며, @for에서는 항목마다 별도의 상태를 유지
기존 JSX/TSX를 사용할 수 있고, .tsrx에서는 @for, @if, @switch, @try 같은 확장 문법도 제공
React의 합성 이벤트 대신 브라우저의 실제 DOM 이벤트를 사용하며, 입력할 때마다 반응하려면 onInput을 사용
스트리밍 SSR, 서버에서 만든 HTML에 클라이언트 동작을 연결하는 hydration과 지연 hydration 지원
ReactCompat과 OctaneCompat으로 Octane과 React 컴포넌트를 서로의 앱 안에서 실행 가능
자체 렌더러에는 클래스 컴포넌트, React Server Components, 합성 이벤트 시스템을 포함하지 않음
MIT 라이선스

Read Entire Article

Octane - React 프로그래밍 모델을 직접 DOM 코드로 컴파일하는 UI 프레임워크

Related

Qwen 3.8 Omni Flash

배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것

Show GN: SQLBraid - SQL을 그대로 쓰는 TypeScript 라이브러리

OpenAI 해킹

사진작가 오스틴 만의 iPhone 18 Pro 카메라 리뷰

존 그루버의 iPhone 18 Pro 리뷰

일본의 100세 이상 인구, 10만 명 넘어

사용자를 위해 일부러 어렵게 만드는 경험, 어디까지 괜찮을까?

Tips

Trending

Popular

[美특징주]월마트, 동일매장 매출 성장 둔화에 주가 10% 급락

[속보] 네팔 홍수로 고립됐던 한국인 10명 중 9명 안전지역 이송

“돌발적으로 저질렀다”…제자 물통에 소변 넣은 교사, 日 교육계 ‘발칵’

한로로, 코르티스 ‘조롱 가사’ 논란 직접 등판…“좋은 뜻으로 받아들여”

베테랑 김현수 끝내기안타…KT 선두 지켰다, 4년차 김정운은 데뷔 첫 승 감격 [SD 수원 스타]

Qwen 3.8-Flash-Next(125B a6B), 2026년 8월 26일 공개 예정

네팔 홍수 버티고 명소된 ‘기적의 초록집’…집주인이 밝힌 비밀은

부러진 히말라야 빙하가 물 가뒀다가 ‘펑’…“화산 폭발 같았다”

에브리봇, 中 피지컬 AI 기업 엑스스퀘어와 MOU…휴머노이드 사업 확대

'AI 의약 플랫폼' 미라보 바이오, 프리 A 40억원 투자 유치[마켓인]