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

​
새 액티비티 쌓기

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

MyActivity.tsx
import { 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() 함수의 세번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

옵션명역할타입기본값
animate애니메이션을 켜거나 꺼요Booleantrue

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

​
현재 액티비티 교체하기

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

MyActivity.tsx
import { 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() 함수의 세번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

옵션명역할타입기본값
animate애니메이션을 켜거나 꺼요Booleantrue

​
현재 액티비티 삭제하기

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

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

type ArticleParams = {
  title: string;
};
const Article: ActivityComponentType<ArticleParams> = ({ title }) => {
  const { pop } = useFlow();

  const onClick = () => {
    pop();
  };

  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{title}</h1>
        <button onClick={onClick}>back</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;

pop()은 첫번째 파라미터로 추가 옵션을 받아요. 첫번째 파라미터인 추가 옵션은 선택적으로 넘기지 않을 수 있어요. (기본값을 사용해요)

pop();

// 또는
pop({
  /* 추가 옵션 */
});

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

옵션명역할타입기본값
animate애니메이션을 켜거나 꺼요Booleantrue

여기까지 기본적인 Stackflow의 활용법을 알아봤는데요. 이제 활용하는 것을 넘어서서 스택 상태의 내부 구조와 이를 이용한 구체적인 응용 방법에 대해 알아볼께요.

액티비티상태 가져오기