상태 가져오기

Stackflow의 내부 상태는 한마디로 표현하면, 전환 상태를 가진 스택 자료구조에요.

그림 1. 새 액티비티가 추가되는 모습그림 2. 기존 액티비티가 제거되는 모습

activities 필드로 접근할 수 있는 액티비티는 기본적인 존재와 관련된 정보 이외에, ID, 이름, 그리고 현재 시점의 전환 상태 등의 상태값들을 가져요. 이러한 상태값들을 이리저리 활용해 @stackflow/plugin-basic-ui가 만들어졌답니다. (여러분도 충분히 만들 수 있어요!)

스택 상태를 렌더링에 활용하기

스택 상태를 UI 컴포넌트에서 가져오려면, useStack() 훅을 활용해요.

MyActivity.tsx

import { ActivityComponentType, useStack } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const stack = useStack();
  const { replace } = useFlow();
 
  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };
 
  useEffect(() => {
    console.log("현재 쌓여진 액티비티들:", stack.activities);
    console.log("전체 전환 상태:", stack.globalTransitionState);
    console.log(
      "초기에 설정된 Transition Duration 옵션",
      stack.transitionDuration,
    );
  }, [stack]);
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

스택 상태에는 다음과 같은 필드들이 존재해요.

Option	Type	Description
activities	`Activity[]`	액티비티 목록
transitionDuration	`number`	`stackflow()`에서 설정한 `transitionDuration` 값
globalTransitionState	`idle`, `loading`	액티비티가 현재 움직이고 있는지 여부

액티비티 상태를 렌더링에 활용하기

현재 액티비티의 정보를 가져오기 위해 useActivity() 훅을 사용할 수 있어요.

MyActivity.tsx

import { ActivityComponentType, useActivity } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const activity = useActivity();
  const { replace } = useFlow();
 
  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };
 
  useEffect(() => {
    console.log("현재 액티비티의 전환 상태:", activity.transitionState);
  }, [activity]);
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

액티비티 상태에는 다음과 같은 필드들이 존재해요.

Option	Type	Description
id	`string`	액티비티 ID
name	`string`	등록된 액티비티 이름
transitionState	`enter-active`, `enter-done`, `exit-active`, `exit-done`	액티비티의 전환 상태
params	`Object`	액티비티에 전달된 파라미터
isActive	`boolean`	액티비티의 활성 여부 (exit-active 일때 `false`)
isTop	`boolean`	최상단 액티비티 여부 (exit-active 일때 `true`)
isRoot	`boolean`	최하단 액티비티 여부

Customize UI

원하는 컴포넌트에서 useActivity(), useStack() 등의 상태를 이용해서 자유롭게 UI를 커스터마이징할 수 있어요.

만약 @stackflow/plugin-basic-ui에서 제공되는 UI를 활용하고 싶으시다면, 제공되는 AppScreen 컴포넌트를 활용해요.

혹시 UI 또는 로직을 확장하고 다른 개발자와 함께 공유하고 싶으신가요? 다음으로 넘어가서 플러그인 작성 방법에 대해서 알아봐요.

스텝 탐색하기 플러그인 작성하기