Docs
시작하기
설치하기

설치하기

Stackflow 설치하기

설치하기

React 프로젝트 내에서 다음 명령어로 Stackflow를 설치해요.

npm install @stackflow/config @stackflow/core @stackflow/react

설정 파일 만들기

stackflow.config.ts 파일을 만들고 defineConfig()를 사용해 액티비티를 정의해요.

stackflow.config.ts
import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyActivity",
    },
  ],
  transitionDuration: 350,
});

Stackflow 초기화하기

프로젝트 내에 JavaScript(TypeScript) 파일을 하나 생성하고, stackflow() 함수에 config와 액티비티 컴포넌트를 전달해 <Stack />을 생성해요.

다른 컴포넌트에서 <Stack />을 활용할 수 있도록 export ... 해줘요. useFlow() 같은 훅은 사용하는 컴포넌트에서 @stackflow/react로부터 직접 import해요.

stackflow.ts
import { stackflow } from "@stackflow/react";
import { config } from "./stackflow.config";
import MyActivity from "./MyActivity";
 
export const { Stack } = stackflow({
  config,
  components: {
    MyActivity,
  },
  plugins: [],
});

기본 UI 확장 설치하기

설치하기

Stackflow는 기본적으로 UI(DOM과 CSS) 구현을 포함하지 않아요. 원하는 렌더링 결과를 얻기 위해서는 플러그인 추가가 필요해요. 다음 명령어로 @stackflow/plugin-renderer-basic 플러그인과 @stackflow/plugin-basic-ui 확장을 설치해요.

npm install @stackflow/plugin-renderer-basic @stackflow/plugin-basic-ui

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";
import { config } from "./stackflow.config";
import MyActivity from "./MyActivity";
 
export const { Stack } = stackflow({
  config,
  components: {
    MyActivity,
  },
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});

CSS 삽입하기

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

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

<Stack /> 컴포넌트 렌더링하기

원하는 렌더링 위치에 다음과 같이 <Stack /> 컴포넌트를 초기화 해줘요.

App.tsx
import { Stack } from "./stackflow";
 
const App = () => {
  return (
    <div>
      <Stack />
    </div>
  );
};
 
export default App;

여기까지 완료되셨다면 다음으로 넘어가서 액티비티를 등록하는 방법에 대해서 알아봐요.

소개액티비티