액티비티 탐색하기

성공적으로 액티비티를 등록했다면, 이제 액티비티 사이를 이동해볼 차례에요. Stackflow에서는 useFlow()를 통해 액티비티를 쌓거나, 교체하거나, 삭제할 수 있도록 지원하고 있어요. 한번 알아볼까요?

새 액티비티 쌓기

stackflow.ts에서 생성했던 useFlow() 훅을 사용해요. 해당 훅 내에 push() 함수를 통해 다음과 같이 새 액티비티를 쌓을 수 있어요.

MyActivity.tsx

import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const { push } = useFlow();
 
  const onClick = () => {
    push("Article", {
      title: "Hello",
    });
  };
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

push()는 첫번째 파라미터로 이동할 액티비티의 이름, 두번째 파라미터로 이동할 액티비티의 파라미터, 세번째 파라미터로 추가 옵션을 받아요. 세번째 파라미터인 추가 옵션은 선택적으로 넘기지 않을 수 있어요. (기본값을 사용해요)

push("액티비티_이름", {
  /* 액티비티 파라미터 */
});
 
// 또는
push(
  "액티비티_이름",
  {
    /* 액티비티 파라미터 */
  },
  {
    /* 추가 옵션 */
  },
);

push() 함수의 세번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

Option	Type	Description	Default
animate	`boolean`	애니메이션을 켜거나 꺼요	true

💡

TypeScript를 활용하면, 액티비티 이름과 액티비티 파라미터가 엄격하게 타이핑 되어있는 모습을 확인하실 수 있어요. TypeScript를 통해 안전하면서 편리하게 Stackflow를 활용해보세요.

현재 액티비티 교체하기

다음으로 스택에 새로운 액티비티를 추가하지 않고 현재 액티비티를 교체하는 방법에 대해서 살펴봐요. stackflow.ts에서 생성했던 useFlow() 훅의 replace() 함수를 통해 다음과 같이 현재 액티비티를 교체할 수 있어요.

MyActivity.tsx

import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const { replace } = useFlow();
 
  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

replace()는 push()와 비슷한 API를 갖고 있어요. 첫번째 파라미터로 이동할 액티비티의 이름, 두번째 파라미터로 이동할 액티비티의 파라미터, 세번째 파라미터로 추가 옵션을 받아요. 세번째 파라미터인 추가 옵션은 선택적으로 넘기지 않을 수 있어요. (기본값을 사용해요)

replace("액티비티_이름", {
  /* 액티비티 파라미터 */
});
 
// 또는
replace(
  "액티비티_이름",
  {
    /* 액티비티 파라미터 */
  },
  {
    /* 추가 옵션 */
  },
);

replace() 함수의 세번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

Option	Type	Description	Default
animate	`boolean`	애니메이션을 켜거나 꺼요	true

현재 액티비티 삭제하기

마지막으로 현재 액티비티를 삭제하고 이전 액티비티로 돌아가는 방법에 대해서 살펴봐요. stackflow.ts에서 생성했던 useFlow() 훅의 pop() 함수를 통해 다음과 같이 현재 액티비티를 삭제할 수 있어요.

Article.tsx

import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
type ArticleParams = {
  title: string;
};
 
const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
  const { pop } = useFlow();
 
  const goBack = () => {
    // 액티비티 하나만 제거
    pop();
  };
 
  const goBackMultiple = () => {
    // 액티비티 여러 개 제거
    pop(3);
  };
 
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{params.title}</h1>
        <button onClick={goBack}>Back</button>
        <button onClick={goBackMultiple}>Back 3 Steps</button>
      </div>
    </AppScreen>
  );
};
 
export default Article;

pop() 함수의 첫번째 파라미터는 제거할 액티비티의 개수를 지정하거나 추가 옵션을 정의할 수 있어요. 첫번째 파라미터를 액티비티 개수로 사용하면, 두번째 매개변수는 추가 옵션을 전달하는 데 사용할 수 있어요.

pop(); // 액티비티 하나 제거
 
pop(3); // 액티비티 여러 개 제거
 
pop({
  /* 추가 옵션 */
}); // 추가 옵션과 함께 액티비티 하나 제거
 
pop(3, {
  /* 추가 옵션 */
}); // 추가 옵션과 함께 액티비티 여러 개 제거

pop() 함수의 첫번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

Option	Type	Description	Default
animate	`boolean`	애니메이션을 켜거나 꺼요	true

액티비티를 쌓고, 교체하고, 삭제하는 방법에 대해서 알아봤어요. 이제 액티비티 내의 가상의 스택을 만들 수 있는 방법에 대해 알아봐요.

액티비티 스텝 탐색하기