[코드리뷰] React 19.2 Activity 기반 반응형 상태 유지 라이브러리 만들었습니다

안녕하세요, responsive-keepalive v0.1.0을 만들었는데 1.0 API 확정 전에 피드백을 받고 싶어서 글 남겨봅니당

만든 이유

tailwind를 사용하면서 코드 복잡도가 올라가서, 뷰포트 별 컴포넌트 구분에 대한 니즈가 커졌습니다.

{isMobile ? <MobileNav /> : <DesktopNav />}

문제는 브레이크포인트를 넘을 때마다 unmount/remount가 일어나면서 로컬 상태랑 스크롤 위치, 컴포넌트 상태 정보가 날아간다는 것입니다.

해결 방법

React 19.2의 <Activity>로 두 트리를 모두 마운트한 채 하나를 숨기는 방식입니다. 상태가 그대로 살아있습니다.

다양한 API에 대한 사용 에시는 글 하단 Architecture 문서에 있습니다!

const { Desktop, Mobile } = createResponsive({
  breakpoints: { mobile: 0, desktop: 768 }
});

function App() {
  return (
    <>
      <Mobile><MobileNav /></Mobile>
      <Desktop><DesktopSidebar /></Desktop>
    </>
  );
}

또는

// responsive.ts
import { createResponsive } from 'responsive-keepalive';

export const { Responsive, Provider, Match, useVariant, useResponsiveValue } =
  createResponsive({ mobile: 0, desktop: 768 }, { ssr: 'mobile' });
export const { Mobile, Desktop } = Match;

// usage
<Provider>
  <Responsive mobile={() => <M />} desktop={() => <D />} />
  <Desktop><DesktopNav /></Desktop>   // composable gate
</Provider>;

anti-thrash 디바운스, CJK IME 안전 처리, SSR, React 19.2 미만 폴백도 넣었습니다.

피드백 받고 싶은 부분

• createResponsive API 구조가 자연스러운지

• 실제 프로젝트에 쓰기 꺼려지는 이유가 있다면

• 빠진 케이스나 설계상 이상한 부분

"이런 거 안 씀, 왜냐면..."도 환영합니다.

• Architecture Docs: https://audemodo.github.io/audemodo-responsive-keepalive-sample/

• GitHub: https://github.com/vi-wolhwa/responsive-keepalive

• Issue: https://github.com/AudeModo/audemodo-responsive-keepalive/issues

• npm: https://www.npmjs.com/package/@audemodo/responsive-keepalive