daangn/stackflow
모바일 스택 네비게이션 UX를 JavaScript에서 구현하는 React 프레임워크
1,015+-1이번 주0 찜
115포크21이슈
중간맛 분석
React 기반의 스택 네비게이션 라이브러리입니다. 코어 로직과 UI 레이어가 분리되어 있어서 상태 관리만 사용하거나 커스텀 UI를 입혀서 사용할 수 있습니다. 플러그인 시스템으로 생명주기에 기능을 주입하고, 서버 사이드 렌더링도 지원합니다. 난이도는 중상(3-4/5)이며, 하이브리드 앱과 웹뷰 개발에 바로 적용할 수 있습니다.
이런 레포예요
이럴 때 쓰면 좋아요
- 모바일 웹뷰에서 네이티브 앱처럼 작동하는 화면 전환이 필요할 때
- 하이브리드 앱 개발에서 iOS/Android 스타일의 스택 네비게이션을 구현할 때
- 스크롤 위치와 화면 상태를 유지하면서 여러 페이지를 관리해야 할 때
핵심 기능
화면 스택 관리와 스크롤 상태 유지iOS 스타일 스와이프 백 제스처 지원UI 레이어 분리 및 플러그인 확장 시스템
대안 대비 차별점
UI와 상태 로직이 완전히 분리되어 있어서 기존 라우팅 라이브러리처럼 UI가 강제되지 않으며, 서버 사이드 렌더링을 지원하고 다양한 프레임워크 통합이 가능합니다.
준비물
- React
- Node.js
바로 시작하기
- 필요한 패키지를 설치합니다.
yarn add @stackflow/config @stackflow/core @stackflow/react
- 스택플로우 설정을 정의합니다.
import { defineConfig } from "@stackflow/config";
import { stackflow } from "@stackflow/react";
import MyActivity from "./MyActivity";
const config = defineConfig({
activities: [
{
name: "MyActivity",
},
],
initialActivity: () => "MyActivity",
transitionDuration: 350,
});
- Stack 컴포넌트를 생성하고 활동(Activity)을 등록합니다.
const { Stack } = stackflow({
config,
components: {
MyActivity,
},
plugins: [],
});
- App 컴포넌트에서 Stack을 렌더링합니다.
const App = () => {
return <Stack />;
};
ReactDOM.render(<App />, ...)
별 추이 · 7일
1,015+-1 / 7일
활용성 · 따라 만들기 좋은가
따라 하기 좋음샘플 점수 46/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2020년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/daangn/stackflow)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
방법 ① 커넥터 URL
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp방법 ② 플러그인 (체험까지)
플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기