리렌더링 없는 UI 라이브러리("React Zero-UI")

okorion·2026년 1월 23일

📝 Document 요약 및 번역

목록 보기

78/90

— React에서 UI 상태를 “렌더링 없이” 바꾸는 방법

React Zero-UI는 React 애플리케이션에서 UI 상태 변경을 React re-render 없이 처리하는 것을 목표로 하는 라이브러리다.
핵심 아이디어는 명확하다.

UI 상태가 이미 정해져 있다면, 왜 런타임에 다시 렌더링하는가?

핵심 개념: Pre-Rendering 기반 UI 상태

React Zero-UI는 UI 상태를 빌드 타임에 미리 생성한다.

UI 상태 → data-* attribute
상태 변경 → attribute 값 flip
스타일 적용 → CSS (Tailwind variant)

즉, 상태 변경 시:

React state 업데이트 ❌
컴포넌트 re-render ❌
DOM attribute 변경 ⭕
CSS로 즉시 반영 ⭕

기본 사용 방식: `useUI`

const [, setTheme] = useUI('theme', 'dark');
setTheme('light'); // body에 data-theme="light"

stateKey → <body data-theme="...">
defaultValue → SSR 시 FOUC 방지
반환되는 값은 stale value (write-only 패턴)

Tailwind에서는 다음처럼 사용한다.

<div class="theme-dark:bg-black theme-light:bg-white">
  Fast & Reactive
</div>

Scoped UI 상태: `useScopedUI`

전역이 아닌 특정 요소 단위 UI 상태도 지원한다.

const [theme, setTheme] = useScopedUI('theme', 'dark');

<div
  ref={setTheme.ref}
  data-theme={theme}
>
  Scoped UI
</div>

특징:

data-*가 해당 요소에만 적용
scoped CSS selector 자동 생성
전역 오염 없음
re-render 없음

CSS Variable 지원

UI 상태를 CSS variable로도 관리할 수 있다.

Global CSS Variable

const [blur, setBlur] = useUI('blur', '0px', CssVar);
setBlur('5px'); // body { --blur: 5px }

Scoped CSS Variable

const [blur, setBlur] = useScopedUI('blur', '0px', CssVar);

<div
  ref={setBlur.ref}
  style={{ '--blur': blur }}
>
  Scoped blur
</div>

빌드 타임 동작 방식

개발 시 Zero-UI는 AST를 분석해 다음을 스캔한다.

useUI, useScopedUI 사용 위치
문자열로 해석 가능한 state key
Tailwind variant 클래스

그 결과로:

최적화된 CSS selector 생성
초기 data-* attribute 주입
프로덕션에서 런타임 비용 0

Experimental: SSR-safe `onClick`

React Server Components 환경에서도 클라이언트 인터랙션을 가능하게 하는 실험적 기능을 제공한다.

약 300 bytes 런타임
서버 컴포넌트 유지
클라이언트 이벤트 연결

정리된 장점

README 기준으로 강조하는 포인트는 다음이다.

🚀 Zero React re-renders
⚡ Pre-rendered UI states
📦 350 bytes 미만의 footprint
💫 단순한 Hook API
⚙️ AST 기반 빌드 최적화
🧩 Context, prop-drilling 불필요

한 줄 요약

React Zero-UI는
UI 상태를 “React state”가 아닌 “CSS 상태”로 다루는 라이브러리다.

렌더링 성능이 병목이 되거나,
테마·모달·토글 같은 UI 상태가 애플리케이션 전반에 퍼져 있는 경우,
이 라이브러리는 전혀 다른 접근을 제안한다.

참고
- React Zero-UI GitHub 라이브러리 Github
- React Zero-UI 데모 사이트

okorion

okorion's Tech Study Blog.

이전 포스트

Vitest 브라우저 모드 ("Vitest Browser Mode - The Future of Frontend Testing")

다음 포스트

인간이 코드를 쓰지 않는 시대: 2026을 앞둔 소프트웨어 엔지니어링의 위상 변화

1개의 댓글