Docs
시작하기
설치하기

설치하기

Stackflow 설치하기

설치하기

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

npm install @stackflow/core @stackflow/react

Stackflow 초기화하기

프로젝트 내에 JavaScript(TypeScript) 파일을 하나 생성하고, stackflow() 함수를 호출해 <Stack />과 useFlow() 함수를 생성해요.

그리고 다른 컴포넌트에서 <Stack />과 useFlow()를 활용할 수 있도록 export ... 해줘요.

stackflow.ts
import { stackflow } from "@stackflow/react";
 
export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {},
  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";
 
export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {},
  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;

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

소개액티비티