액티비티

화면에 하나씩 쌓이는 화면 하나하나를 액티비티라고 해요. 액티비티는 다음과 같은 속성을 갖고, 필요한 경우 useActivity() 훅을 통해 가져올 수 있어요.

액티비티 등록하기#

액티비티를 실제로 사용하기 위해서는 사용하기 전 stackflow() 함수에 등록이 필요해요. 액티비티는 ActivityComponentType이라는 타입으로 선언되는 리액트 컴포넌트에요.

/**
 * MyActivity.tsx
 */
import { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

const MyActivity: ActivityComponentType = () => {
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>My Activity</div>
    </AppScreen>
  );
};

export default MyActivity;

액티비티를 잘 선언했다면, 다음과 같이 stackflow() 함수의 activities 필드에 등록해요.

/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import MyActivity from "./MyActivity";

const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
  activities: {
    MyActivity,
  },
});

초기 액티비티 등록하기#

액티비티를 성공적으로 등록하셨나요? 하지만 이전에 초기화해놓은 <Stack /> 컴포넌트에는 아무것도 렌더링되고 있지 않을거에요. 왜냐하면, 초기 액티비티를 설정해주지 않았으니까요. 초기에 특정 액티비티를 로드하고 싶다면, 다음과 같이 옵션에 initialActicity를 추가해주세요.

/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import MyActivity from "./MyActivity";

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

성공적으로 초기 액티비티가 등록됐다면 화면에서 렌더링 된 결과를 눈으로 확인하실 수 있어요.

액티비티에 필요한 파라미터 등록하기#

해당 액티비티가 사용될 때, 특정 파라미터가 필요한 경우가 있어요. 이런 경우 다음과 같이 액티비티의 Props로 해당 파라미터를 선언해요.

/**
 * Article.tsx
 */
import { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

type ArticleParams = {
  title: string;
};
const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{params.title}</h1>
      </div>
    </AppScreen>
  );
};

export default Article;

또는,

import { AppScreen } from "@stackflow/plugin-basic-ui";

type ArticleParams = {
  params: {
    title: string;
  };
};
const Article = ({ params: { title } }: ArticleParams) => {
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{title}</h1>
      </div>
    </AppScreen>
  );
};

export default Article;

액티비티를 성공적으로 잘 등록했나요? 그렇다면 이제 등록된 액티비티를 어떻게 열고, 그 사이를 어떻게 탐험할 수 있는지 알아볼게요.