stackFlow 시작 방법

앱 내에서 부드럽게 쌓이며 넘어가는 UX화면을 구현하기 위해,

여러 오픈소스를 찾아보았고, 당근마켓에서 개발한 stackFlow를 선정하게 되었다

Mobile-first stack navigator framework with Composable Plugin System

React 프로젝트 내에서 다음 명령어로 Stackflow 설


# 스택 상태 관리 패키지
$ yarn add @stackflow/core @stackflow/react
 
# 기본적인 UI 구현을 위한 패키지
$ yarn add @stackflow/plugin-renderer-basic @stackflow/plugin-basic-ui

그리고 다음과 같이 stackflow() 함수의 plugins 필드에 @stackflow/plugin-renderer-basic에 들어있는 basicRendererPlugin() 플러그인과 @stackflow/plugin-basic-ui의 basicUIPlugin() 플러그인을 초기화


/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
 
export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {},
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});

@stackflow/plugin-basic-ui에서 제공하는 CSS도 내 코드 어딘가에 삽입


import "@stackflow/plugin-basic-ui/index.css";


import { stackflow } from '@stackflow/react';
import { basicRendererPlugin } from '@stackflow/plugin-renderer-basic';
import { basicUIPlugin } from '@stackflow/plugin-basic-ui';
import MainActivity from './activities/Main/Main';
import MenuActivity from './activities/Menu/Menu';

// 현장 체크인
import AccommodationSelectionActivity from './activities/OnsiteCheckIn/AccommodationSelection/AccommodationSelection';
...

const activities = {
	MainActivity,
	MenuActivity,

	// 현장 체크인
	AccommodationSelectionActivity,
	...
};

export const { Stack, useFlow } = stackflow({
	transitionDuration: 350,
	activities,
	initialActivity: () => 'MainActivity',
	plugins: [
		basicRendererPlugin(),
		basicUIPlugin({
			theme: 'cupertino'
		})
	]
});